如何使用css创建定向两个箭头？

Question

如何使这条线带有双箭头？

我看过一些教程，教你如何创建带箭头的框，但是，就我而言，这些教程都不适合。

Answer 1

首先，那些 css3 箭头更像是一个概念证明，而不是其他任何东西。您不应该出于严重的原因使用它们。无论哪种方式，您都必须创建中心框，然后使用:before 和:after 伪元素来绘制两个箭头。当然，不会为你做这项工作。唯一的问题是这样做不会包括边框，因为在这些技巧中，边框通常是一个尺寸稍大的底层三角形。换句话说，如果您希望它包含边框，则不再可以使用单个元素，您需要使用两个重叠元素......或者只是一个图像或svg。

Answer 2

您可以使用纯 css 来实现。（支持所有浏览器的非常简单的方法）。

HTML

<div class="container">
  <span class="arrow-left"></span>
  <span class="arrow-right"></span>
</div>

CSS

.container{
width:60%; 
height:40px; 
background:#ccc; 
margin:100px auto;
}
.arrow-right {
width: 0; 
height: 0; 
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #ccc;
float:right;
margin-top:-20px;
margin-right:-40px;
}

.arrow-left {
width: 0; 
height: 0; 
border-top:40px solid transparent;
border-bottom: 40px solid transparent; 
float:left;
border-right:40px solid #ccc;
margin-top:-20px;
margin-left:-40px;
}

工作小提琴

Fiddle

更新

您也可以尝试使用 :before,:after 之类的伪类来实现这一点，但它们在 IE 中具有一定的浏览器兼容性。 （我不会喜欢这种方法，但它是一种简单的方法）。

Answer 3

你可以使用类似的东西：http://jsfiddle.net/3hfz8r8r/1/

.arrow {
    background: red;
    height: 30px;
    width: 300px;
    margin: 100px auto 0;
    position: relative;
    -webkit-filter: drop-shadow(1px 1px 1px #000);
}

.arrow:before {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 30px solid red;
    border-bottom: 40px solid transparent;
    position: absolute;
    content: '';
    left: -30px;
    top: 50%;
    -webkit-transform: translatey(-50%);
}

.arrow:after {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 30px solid red;
    border-bottom: 40px solid transparent;
    position: absolute;
    content: '';
    right: -30px;
    top: 50%;
    -webkit-transform: translatey(-50%);
}

带有这样的标记：

<div class="arrow"></div>

一个例子：http://jsfiddle.net/3hfz8r8r/1/