css實現三角形原理

首先，需要把元素的寬度、高度設爲0。

然後設置邊框樣式。最關鍵的也在這裏。

這裏我們先做一個實驗，如果一個元素具有下列樣式：

{
width: 0;
height: 0;
border: 4px solid;
}

 效果是什麼？沒錯是個正方形：

因爲元素寬度、高度都爲0，只有4px的邊框，於是變成了上面的效果。

再來，我們把樣式改成下面這樣：

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}

 這會是什麼效果呢？可能你不會想到：

這是爲什麼呢？我們打個比方，有四塊紅色和黑色的木板代表元素的四個邊框，把他們兩橫兩豎重疊起來，這時候他們在二維平面的投影便成了上面的效果。

說到這裏，大家該明白了上面的三角形圖標是怎麼來的了吧：元素沒有下邊框，而左右邊框又是透明的，相當於只有上圖中的上面的黑色三角形部分。

所以，如果我們要做倒立三角形、向右的、或者向左的三角形，只需要爲三角形底部設置邊框，兩腰邊框透明即可。

例如：

{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}

  

另外，如果我們把樣式改成這樣：

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
}

 將得到如下效果：