（向下）帶CSS的箭頭框

Question

我想要做什麼this arrow box does，但不是指向右側的箭頭，而是希望它指向下方。

我已經試過這樣的事情：jsfiddle link here

#triangle-down { 
    width: 0; 
    height: 0; 
    border-left: 150px solid transparent; 
    border-right: 150px solid transparent; 
    border-top: 30px solid red; 
} 
#body { 
    background-color: red; 
    width:300px; 
} 

<div id="body"> 
    <h2>Title</h2> 

    <p>this is text.</p> 
</div> 
<div id="triangle-down"></div> 

它往往是在排隊的兩個div方面不可靠。我想要一個獨立的解決方案。

Answer 1

給你...增加了一些基本樣式爲多更多鈔票的方向，以及... http://jsfiddle.net/hbzHZ/16/

採用兩種選擇，一個有內div，另一個與僞元素:after

Answer 2

您可以使用具有相同樣式的:after僞元素加display: block; content: ""; background-color: white（或BG實際上應該是的任何值）。

http://jsfiddle.net/ExplosionPIlls/hbzHZ/15/

Answer 3

這裏你有http://jsfiddle.net/bqX3S/28/ 關鍵是要用相同的寬度和最高值

width: 100px; 
top: 100px; 

因此，如果變化#arrow寬度您需要更改頂部爲：後：元素之前以及