如何使用CSS3來畫一個三角形經常令人非常感到困惑,其實原理上是寬度相等的邊距以45度來連接。
首先看第一個圖
這個是正常情況下,如果我們這個時候把頂部的邊距設爲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;
}
實現效果如圖