HTML

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

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

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

  1. CSS だけで矢印を作成
    1. 矢印の向きを変える
  2. CSS だけでテキストの横に矢印を作成する方法

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 はこちら。

span::before {
content: "";
display: inline-block;
width: 0;
height: 0;
margin: 0 0.5em 0 0;
border: 5px solid transparent;
border-right: 0 solid transparent;
border-left: 8px solid #000;
}

まとめ

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

この記事をシェアする

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