CSS為div新增尖角樣式

先來看一下尖角效果

乙個div，右側邊框的上出現了乙個尖角的形狀。那麼如何來實現這麼乙個效果呢？

1.原理

對於乙個塊級元素，但我們分別將元素的上下左右四個border設定成乙個比較大的畫素（如10px），樣式設定成solid ,分別設定成不同的顏色的時候，同時將元素的width,height設定為0.這時我們將會看到四條邊均呈現為三角形的形狀。如圖：

其css樣式為：

.element

乙個普通的div。

四個三角形分別是四條border四條border所呈現出來的，而我們最終的效果好像跟乙個三角形的關係比較大些。如果得到乙個三角形呢？其實這個很簡單，我們只需要把其餘三條border顏色屬性設定為transparent（透明）的樣式，另乙個border的顏色屬性保持不變。

.element

此時的效果：

好了，三角形出來了。那我們也就實現了最為關鍵的的地方。我們在弄出來乙個白色的三角形，然後將白色三角形覆蓋到這個有色三角形之上，但是不能完全覆蓋，讓其露出乙個尖角的效果來。這就是基本的原理。

2.實現

首先需要乙個div容器，設定border,width,height的屬性，同時將設定其為相對定位。

這裡我們使用元素的偽選擇器:before,:after來加入這兩個三角形，before和after預設為行內元素，所以首先要將其設定為塊級元素，絕對定位。

首先新增before偽選擇器，用它來生成與border顏色的相同的第乙個三角形，並將其定位到左邊框上。

} 用絕對定位將這個白色三角形定位到左邊框上，覆蓋掉灰色三角形的一部分，留下乙個尖角。好了，最終的效果就是這樣的。

完成。**：