CSS的小箭頭

常常在很多網站會看到小三角形箭頭，當期都是使用圖片去製作，而時代的改變，就是要用寫的比較潮，為了趕上流行，所以在這分享小箭頭的製作方法。

用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