CSS で三角形や矢印を作る方法

CSS で三角形や矢印を作る方法

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

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

くの字矢印を作る方法

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);
}

ホバー時にアクションを加える場合は rotate で向きを変える方が扱いやすいかもしれません。

三角矢印を作る方法

CSS で三角矢印を作る方法を紹介します。
三角形は border 要素に透明箇所と塗りの箇所を分けることによって再現します。
実際の見た目、ベースの 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-block で指定するとテキストの横に並べることができます。
文字が長く矢印の下にテキストが入り込む場合は、position で absolute 指定などで対応してください。

テキストの左側に矢印
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() の値を調整してください。
線の太さを変えるとニュアンスが変わります。
skew() の関係で左右の余白の調整に癖があります。

角丸矢印を作る方法

border-radius を使った角丸矢印作り方を紹介します。

.arrow-round {
position: relative;
display: block;
width: 50px;
height: 10px;
border-radius: 5px;
background-color: #1E88E5;
}
.arrow-round::before {
content: "";
position: absolute;
top: 6px;
right: -2px;
display: block;
width: 25px;
height: 10px;
border-radius: 5px;
background-color: #FDD835;
transform: rotate(-45deg);
}
.arrow-round::after {
content: "";
position: absolute;
bottom: 6px;
right: -2px;
display: block;
width: 25px;
height: 10px;
border-radius: 5px;
background-color: #e53935;
transform: rotate(45deg);
}

自由な形の矢印を作る方法

clip-path を使って自由な形の矢印を作る方法を紹介します。

.arrow-clippath {
position: relative;
display: inline-block;
width: 48px;
height: 48px;
background-color: #1E88E5;
clip-path: polygon(0 33%, 50% 33%, 50% 15%, 100% 50%, 50% 85%, 50% 67%, 0 67%);
}

clip-path で polygon を指定して自由な形を作ります。親要素の大きさに対して、座標をパーセント指定しますが、数値を見て調整するのは大変なので、図形を見ながら調整できるWEBサービス Clippy — CSS clip-path maker などの利用をおすすめします。

clip-pathは、単色やグラデーション、画像(background-image)が使用できます。
注意したい点としては、古いブラウザーでは対応してないため、案件の要件定義を確認の上ご利用ください。
clip-path の対応状況はこちらでご確認ください。

まとめ

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