如圖，附上css代碼
{
width: 0;border-width: 30px 0px 72px 164px;
border-style:solid;
border-color:red;
border-left-color: #d0d0d0;
}
css的屬性總是能出現些奇異的效果，圖中的div的可見寬高是被border撐大的，但是用border-left-color查看左邊框的形狀是并不是想象的長方形，而是三角形。
因為原本border應該是在這樣的情況下定義的
{
width: 100px;
height: 100px;
border-width: 30px 0px 30px 30px;
border-style: solid;
border-color:red
}
寬高都被定義了，border的顯示是正常的效果。倘若加上border-left-color:#d0d0d0,可以看到左方向的邊框站位應該是這樣子的。
把width改為0px或不定義width,會出現這種效果。
回到第一張三角形圖，就不難理解三角形的出現了。border的寬度定義了之后會被滿足，但是由于div的width,height都沒有被定義。左邊框的內側匯集成一點就是一個三角形了。
這種顯示效果可以做出一些小效果。如這種標簽：
話不多說了，上布局
html:
<ul>
<li>
<a>lalala</a>
</li>
<li>
<a>cool</a>
</li>
</ul>
css:
li{
position:relative;
}
a::before{
content:””;
position:absolute;
left:0;
top:5px;
border-style:solid;
border-color:transparent;
border-left-color: #f7f9f8;
border-width:7px 4px;
}
a::after{
content:””;
position:absolute;
right: -5px;
top:5px;
border-style:solid;
border-color:transparent;
border-left-color: #f7f9f8;
border-width:7px 4px;
}
謝幕
