HTML

コピペで簡単 CSS で矢印を作る方法

コピペで簡単 CSS で矢印を作る方法を紹介します。
例えば、画像を使わずに CSS だけで矢印を作りたい時に便利な方法です。

  1. CSS だけで矢印を作成
    1. 矢印の向きを変える

CSS だけで矢印を作成

CSS を使って右向きの矢印を表示する方法を紹介します。
実際の見た目はこんな感じです。

ベースの HTML は次の通りです。

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

CSS は次の通りです。

.arrow {
display: block;
width: 18px;
height: 18px;
border-top: 4px solid #fff;
border-right: 4px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

矢印の向きを変える

矢印の向きを変えたい場合は CSS セレクターの transformrotate を使用します。
rotate に角度の値を入力すると向きを変えられるので、-45度傾けたい場合は transform: rotate(-45deg);と指定します。
次のコードは、矢印を上下左右のそれぞれに向けたい時の指定方法です。

/* 上向き矢印 */
.top {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 右向き矢印 */
.right {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* 下向き矢印 */
.bottom {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
/* 左向き矢印 */
.left {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}

まとめ

コピペで簡単 CSS で矢印を作る方法を紹介しました。
例えば、矢印ではなく三角形を作りたい場合は コピペで簡単 CSS で三角形を作る方法 をご覧ください。

合わせて読みたい関連記事