如何使用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/