Question

我想知道是否有办法围绕导航按钮做一个完整的轮廓，左右两个css三角形（轮廓将包括那些三角形 - 黑色边框 - 它是所有占位符的东西 - 我知道它看起来很糟糕）。看看小提琴。

<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>

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

谢谢。

Answer 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/

试图围绕CSS箭头创建边框。有可能吗？

1 个答案: