使用CSS製作箭頭

Question

我正在嘗試製作類似於水平標籤的東西： 但有條件，應該是唯一的div。可能與畫布是可能的，但我有喜歡的CSS。

#msg { 
    border-bottom: 10px solid transparent; 
    border-right: 10px solid red; 
    border-top: 10px solid transparent; 
    height: 0; 
    width: 100px; 
    background-color: rgba(0,0,0,.8);  margin-left:20px; 
} 

demo

Answer 1

你可以用一些邊境黑客，定位做到這一點，和：前psudo元素。

http://jsfiddle.net/VQcyD/

#msg { 
    width:100px; 
    height:40px; 
    background:red; 
    margin-left:40px; 
    position:relative; 

} 
#msg:before { 
    content:""; 
    position:absolute; 
    border-bottom: 20px solid transparent; 
    border-right: 20px solid red; 
    border-top: 20px solid transparent; 
    height: 0px; 
    width: 0px; 
    margin-left:-20px; 
} 

Answer 2

http://jonrohan.me/guide/css/creating-triangles-in-css/

可能會幫上你，看起來像什麼youre試圖做