純css畫三角形

純css畫三角形與border元素相關

設置border的屬性

width: 100px;
height: 100px;
border-style: solid;
border-width: 100px;
border-color: red forestgreen blue cyan;
複製代碼

去掉width和height

border-style: solid;
border-width: 100px;
border-color: red forestgreen blue cyan;
複製代碼

設置區域三個border顏色爲透明

border-style: solid;
border-width: 100px;
border-color: transparent transparent blue transparent;
複製代碼

雖然當前顯示爲三角形，但實際佔用的空間仍是矩形，猜想與border-width有關

設置對立邊的width爲0

border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent blue transparent;
複製代碼

---

最終效果達成， border屬性的順序爲 top, right, bottom ,left；因此設置其他角度的三角形能夠經過更改屬性值，好比

display: inline-block;
border-style: solid;
border-width: 100px 100px 100px 0;
border-color: transparent blue transparent transparent;
複製代碼