如何使用CSS3來畫一個三角形經常令人非常感到困惑,其實原理上是寬度相等的邊距以45度來連接配接。
首先看第一個圖
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL1EkeONTQE1UNJpHW4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLxMTN2UzNwYTMxAjMwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
這個是正常情況下,如果我們這個時候把頂部的邊距設為none的話就會顯示下面這種情況
再把content寬度設為0
再把content高度設為0
這個時候,很容易聯想到把左右邊距顔色設為透明色(transparent)
大緻過程就是如此,總結一下就是如果我想到一個三角形,比如它的方向就是向左的,那麼隻要設定它相反放下的顔色不為透明,并把其他兩個方向設為透明即可。
代碼如下:
.right{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid pink;
}
.top{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid pink;
}
.left{
width: 0;
height:0;
border-right: 20px solid pink;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent
}
.bottom{
width: 0;
height: 0;
border-top: 20px solid pink;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
實作效果如下
站長部落格:https://www.pipipi.net/