純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;
複製程式碼