使用純 CSS 製作箭頭(arrow)

記錄一下用純 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);
}

當然這樣的話就可以自由到設定箭頭的顏色。