常常在很多網站會看到小三角形箭頭,當期都是使用圖片去製作,而時代的改變,就是要用寫的比較潮,為了趕上流行,所以在這分享小箭頭的製作方法。
用Border
畫箭頭
我們先來看上面的demo,他是一個div,寬及高都是0,而上面的四個顏色都是border
組成的,利用四個邊都是20px寬的border
,且在不同的色彩下,他就會造成這樣的結果。
.arrow width: 0 height: 0 border-top: red 20px solid border-right: orange 20px solid border-bottom: blue 20px solid border-left: green 20px solid
再由程式碼得知,上右下左的色彩對應,如果我們想要一個向上、藍色的箭頭,我們就需要bottom
的border
。
正式開始
往事知多少。
我們需要先來一個文字方塊,它的CSS裡面一定需要position: relative
,等等會用position: absolute
去控制箭頭的位置。
往事知多少。
.bottomarrow width: 0 height: 0 position: absolute left: 10px bottom: -20px border: transparent 10px solid border-top: $color 10px solid
接下來我們把箭頭加上去,border可以先全部設定transparent 10px solid
,最後再補上需要的部分。利用position: absolute
去控制位置,另外需要注意的是如果箭頭要增加在下面,bottom
的距離,需要是border
的兩倍。
偽元素
往事知多少。
當然,我們也可以用偽元素去增加箭頭,做法是一樣的。
&:after content: "" width: 0 height: 0 position: absolute left: 10px bottom: -20px border: transparent 10px solid border-top: $color 10px solid