css 各種方位三角形

標籤：style   blog   http   color   com   width   

css邊框和相框構造是一樣的,看下面這代css代碼:

<div style="border-color: red blue black green;border-style: solid;border-width: 40px;height: 100px;width: 100px;"></div>

當我們把div寬度和高度設為0,看又會是怎樣:

<div style="border-color: red blue black green;border-style: solid;border-width: 40px;height: 0px;width: 0px;"></div>

可以看出,四個指向的三角形已經出現了,下面以得到紅色三角形為例:

第一步: 我們去掉黑色邊框試試
<div style="border-color: red blue black green;border-style: solid;border-width: 40px; border-bottom:none; height: 0px;width: 0px;"></div>

第二步: 好像把左右邊框去掉就ok了,我試過,其實是不是的.

可見,左右邊框不能去掉...其實紅色三角形占的空間大就是這麼大,所以,我們沒辦法在大小上做控制了.換種思路,把左右邊框設定成透明,就可以了..

<div style="border-color: red transparent transparent transparent;border-style: solid;border-width: 40px ; border-bottom:none; height: 0px;width: 0px;"></div>

大功已造成...不過,這是個正三角形,如果只要等腰三角形怎麼辦? 試試左右邊框寬度吧...呵呵.

<div style="border-color:red transparent transparent transparent;border-style:solid;border-width:40px 20px 0 20px; border-bottom:none; height: 0px;width: 0px;"></div>


其他的三角形,以此類推就ok了...