试图在 CSS 箭头周围创建边框。可能吗？答案

【问题标题】：trying to create borders around CSS arrows. Is it possible?试图在 CSS 箭头周围创建边框。可能吗？
【发布时间】：2015-12-19 06:59:06
【问题描述】：

我试图弄清楚是否有办法在导航按钮周围做一个完整的轮廓，该按钮有 2 个左右的 CSS 三角形（轮廓将包括那些三角形 - 黑色边框 - 它都是占位符的东西 - 我知道它看起来很糟糕）。看看小提琴。

https://jsfiddle.net/eshans/1hq04jbh/

<div class="border"></div>
    <div class="arrow">
        <div class="inner-arrow">
             <img src="http://www.phenotract.com/test/check.png" height="30" width="20" align="left">  <span> Text here Text Here</span>

</div>

只是不确定这是否可以在没有一些骇客的情况下实现。

谢谢。

【问题讨论】：

this 你在找什么？
@AntonioSmoljan 我认为他正在寻找它以完美地适合箭头的外部，我将对此进行一些修改，看看是否能找到。
stackoverflow.com/questions/27636373/…的可能重复

标签： html css

【解决方案1】：

HTML

<div>
    <div class="arrow-box1"></div>
    <div class="arrow-box">
        <span>text here</span>
    </div>
</div>

CSS

.arrow-box, .arrow-box1 {
    float:left;
    position: relative;
    background: white;
    border: 3px solid green;
    border-right: 0 none;
    border-left: 0 none;
    height: 46px;
    width: 100px;
    padding: 10px;
    box-sizing: border-box;
}

.arrow-box1 {
    width: 30px;
}

.arrow-box1:after, .arrow-box1:before,
.arrow-box:after, .arrow-box:before {
    left: 0;
    top: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow-box:after, .arrow-box:before {
    left: 100%;
    top: 0;
}

.arrow-box:after,
.arrow-box1:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: black;
    border-width: 20px;
}

.arrow-box1:after {
    border-left-color: #F3F5F6;
}

.arrow-box1:before,
.arrow-box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: green;
    border-width: 23px;
    margin-top: -3px;
}

https://jsfiddle.net/1hq04jbh/5/

编辑：用两个三角形更新示例

也可以看看http://www.cssarrowplease.com/

【讨论】：

【解决方案2】：

只是不确定这是否可以在没有一些骇客的情况下实现。

您可能会争辩说，一旦您开始使用 html 元素仅用于创建箭头 (<div class="inner-arrow">)，您就已经有点走投无路了。

我想 CSS 黑带可以想出一个解决方案，但我建议使用 SVG 背景图像来做到这一点。这是一个简单的形状，所以如果您不喜欢使用另一个 http-request 来获取 SVG 的想法，您甚至可以 use it as a data-uri：

【讨论】：

谢谢，我会看看这个:)