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

Question

我怎样才能使这条线与双箭？

我见过一些教程，教你如何用箭头创建框，但是，在我的情况下，这些教程都不适合。

Answer 1

你可以使用纯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

更新

您也可以尝试让这与伪类，如：前：之后，但他们在IE一些浏览器的兼容性。 （我不会喜欢这种方法，但它是一种简单的方法）。

Answer 2

首先，这些CSS3箭更多的是一种概念，比什么都重要的证据。你不应该因为严重的原因而使用它们。无论哪种方式，要做到这一点，你必须创建中心框，然后使用伪元素:before和:after绘制两个箭头。当然不会为你做这项工作。唯一的问题是，这样做不会包含边框，因为边框通常在这些技巧中是略微大一点的底层三角形。换句话说，如果你需要它，包括边框在内不再是单一的元素，你需要使用两个重叠的元素......或者只是一个图像或svg。

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/