CSSでつくる矢印

2020 5/15

2020年5月13日 2020年5月15日

よく使うのですが、たまにどうやるのか忘れてしまうので、メモ用に書いておきます。
ここからコピペできるようにいろんな矢印を追加していきます。

CONTENTS

いろんな矢印

よくみる矢印

完成コード

HTML
<div class="arrow"></div>

CSS
.arrow {
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  border-color: transparent transparent #333 #333;
  transform: rotate(-45deg);
}

手順1

まず、ハコ(div)幅や高さを決めて、正方形をつくる。
そのハコをborderで囲む。

CSS
.arrow {
  width: 30px;
  height: 30px;
  border: 2px solid #333;
}

手順2

次にborder-colorというCSSをあてる。
2辺だけを表示するため、いらないところはtransparentで透明にする。順番は時計周り。
border-color: transparent(上) transparent(右)
#333(下) #333(左)
この色を変更することで矢印の色が変えられる

CSS
.arrow {
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  border-color: transparent transparent #333
  #333;
}

手順3

最後に、くるっと回転させて完成！
rotate(-45deg)の角度を変えることで矢印の向きが変えられる。

CSS
.arrow {
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  border-color: transparent transparent #333
  #333;
  transform: rotate(-45deg);
}