よく使うのですが、たまにどうやるのか忘れてしまうので、メモ用に書いておきます。
ここからコピペできるようにいろんな矢印を追加していきます。
CONTENTS
いろんな矢印
よくみる矢印
![](https://komamen.net/wp-content/uploads/2020/05/arrow-1024x576.jpg)
完成コード
See the Pen arrow by komame (@komame) on CodePen.
![](https://komamen.net/wp-content/uploads/2020/05/arrow-1024x847.png)
手順1
まず、ハコ(div)幅や高さを決めて、正方形をつくる。
そのハコをborderで囲む。
.arrow {
width: 30px;
height: 30px;
border: 2px solid #333;
}
![](https://komamen.net/wp-content/uploads/2020/05/arrow2-1024x743.jpg)
手順2
次にborder-colorというCSSをあてる。
2辺だけを表示するため、いらないところはtransparentで透明にする。順番は時計周り。
border-color: transparent(上) transparent(右)
#333(下) #333(左)
この色を変更することで矢印の色が変えられる
.arrow {
width: 30px;
height: 30px;
border: 2px solid #333;
border-color: transparent transparent #333
#333;
}
![](https://komamen.net/wp-content/uploads/2020/05/arrow3-1024x926.png)
手順3
最後に、くるっと回転させて完成!
rotate(-45deg)の角度を変えることで矢印の向きが変えられる。
.arrow {
width: 30px;
height: 30px;
border: 2px solid #333;
border-color: transparent transparent #333
#333;
transform: rotate(-45deg);
}