HTML

CSS で矢印を作る方法

CSS で矢印を作る方法

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

  1. くの字矢印を作る方法
    1. 矢印の向きを変える
  2. 三角矢印を作る方法
    1. テキストの横に矢印(三角)を作る方法
  3. 棒付き矢印を作る方法

くの字矢印を作る方法

CSS を使って「く」の字矢印を作る方法を紹介します。
実際の見た目、ベースの HTML や CSS は次の通りです。

<div class="arrow-left"></div>
<div class="arrow-top"></div>
<div class="arrow-right"></div>
<div class="arrow-bottom"></div>
.arrow-left {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 10px;
border-left: 4px solid #000;
border-bottom: 4px solid #000;
transform: rotate(45deg);
}
.arrow-top {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 10px;
border-top: 4px solid #000;
border-left: 4px solid #000;
transform: rotate(45deg);
}
.arrow-right {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 10px;
border-top: 4px solid #000;
border-right: 4px solid #000;
transform: rotate(45deg);
}
.arrow-bottom {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 10px;
border-bottom: 4px solid #000;
border-right: 4px solid #000;
transform: rotate(45deg);
}

display 要素などは適宜変更を加えてご利用ください。

矢印の向きを変える

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

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

三角矢印を作る方法

CSS を三角矢印を作る方法を紹介します。
実際の見た目、ベースの HTML や CSS は次の通りです。

<div class="triangle-left"></div>
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
.triangle-left {
display: inline-block;
border-style: solid;
border-width: 14px 24px 14px 0;
border-color: transparent #000 transparent transparent;
}
.triangle-top {
display: inline-block;
border-style: solid;
border-width: 0 14px 24px 14px;
border-color: transparent transparent #000 transparent;
}
.triangle-right {
display: inline-block;
border-style: solid;
border-width: 14px 0 14px 24px;
border-color: transparent transparent transparent #000;
}
.triangle-bottom {
display: inline-block;
border-style: solid;
border-width: 24px 14px 0 14px;
border-color: #000 transparent transparent transparent;
}

display 要素などは適宜変更を加えてご利用ください。

テキストの横に矢印(三角)を作る方法

テキストの横に三角をつける方法を紹介します。
テキストを囲っている要素に擬似要素を追加します。
追加する擬似要素が inline 要素だとテキストに並ぶ形で表示できます。

テキストの左側に矢印
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;
}

棒付き矢印を作る方法

transform: skew() を使って棒付きの矢印を作る方法を紹介します。

.stickarrow {
width: 40px;
height: 8px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: skew(45deg);
}

矢印の方向を変えたいときは、ボーダーの位置と skew() の値を調整してください。
傾けた表現をしている関係で、左右の余白の調整に癖があります。

まとめ

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

この記事をシェアする