記錄一下用純 CSS 來繪製箭頭的方法:
原本我們如果用 div 來製作一個沒有顏色有邊線的方塊可以這樣寫:
.box{
border: 3px solid black;
padding: 3px;
}
現在把其中兩個邊的寬度設為 0,就可以做一個往角落指的箭頭:
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
再來只要旋轉角度,就可以做指向上下左右的箭頭了:
.arrow {
border: solid black;
border-width: 0px 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
}
當然這樣的話就可以自由到設定箭頭的顏色。