MENU

CSSでつくる矢印

CSSでつくる矢印

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

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);
}
CSSでつくる矢印

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
CONTENTS
閉じる