用border實現三角形的過程

• 2019 年 10 月 4 日
• 筆記

div{    width:100px;    height:100px;    background:yellow;    border-top: 20px solid red;    border-right:20px solid black;    border-bottom:20px solid green;    border-left:20px solid blue;  }

觀察上圖可以發現，border表現為梯形。當減小box的寬高時，會發生如下變化：

從上圖很容易看出，當box寬度降低到很小，也就是border的梯形的上邊降到很小。所以想一想，當這一值降到0時，border就變成了三角形。如下圖：

所以我們就可以通過將元素寬高設置為0，而通過控制border來得到想要的三角形了。

實現

將不需要方向的border設置為透明（transparent），就可以用來實現三角形了。比如想實現下三角形，就將border-left，border-bottom，border-right設置為transparent即可。

div{    width:0px;    height:0px;    border-top: 20px solid red;    border-right:20px solid transparent;    border-bottom:20px solid transparent;    border-left:20px solid transparent;  }

此時只有border-top顯示且為紅色，其他都為透明，所以為紅色三角形

div{    width:100px;    height:100px;    border-top: 60px solid red;    border-right:20px solid transparent;    border-bottom:0px solid transparent;    border-left:20px solid transparent;  }

此時div元素有一定的寬高，但是無內容，佔去了原屬於是三角形的一部分，所以顯現的是一個梯形。

就不一一列舉了，只要明白每個方向的border都是一個三角形，就能通過調整border的大小和顏色/透明，獲得各種三角形和梯形了。