CSS爲div添加尖角樣式

先來看一下尖角效果

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

1.原理

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

其CSS樣式爲：

.element{
    width: 0px;
    height: 0px;
    border-top: 20px solid aqua;
    border-right: 20px solid #760000;
    border-bottom: 20px solid blue;
    border-left: 20px solid darkkhaki;
}

<div class="element">

</div>

一個普通的div。

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

.element{
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid darkkhaki;
}

此時的效果：

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

2.實現

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

<div class="angle-wrapper">
    
</div>

.angle-wrapper {
    width: 300px;
    height: 200px;
    position: relative;
    margin: 20px auto;
    border: 2px solid #cccccc;
}

然後需要爲這個在這個div右邊框上添加兩個三角形，一個三角形顏色與邊框顏色相同，另一個三角形顏爲白色，用於覆蓋第一個三角形顏色的一部分。

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

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

.angle-wrapper:before {
    content: '';
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: #cccccc;
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -20px;
}

然後添加after僞選擇器，用它生成一個白色的三角形，並將其定位到左邊框上。這裏需要注意的是白色三角形的大小要比有色三角形要小一些，小多少要根據div邊框的大小而定。我這裏邊框爲2px,所以白色三角形就比灰色三角形就小兩個px。這樣可以避免白色三角形將灰色三角形全覆蓋，然後可以產生尖角的效果來。（我這裏說的大小就是設置三角形時的border的px值，如after這裏是18px,before那裏是20px）

.angle-wrapper:after {
    content: "";
    width: 0;
    height: 0;
    border: 18px solid transparent;
    border-left-color: #FFFFFF;
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -18px;
}

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

完成。