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