【コピペ】CSSで矢印を作る方法／サンプルコード

RELEASE / 2024.2.10 UPDATE / 2024.02.10

css

矢印

CSSを使うと様々な図形を表現することが出来ます。
知らないとついつい画像やSVG処理で対応してしまう図形。
今回の記事ではその中でもリンクボタンなどで出現頻度の高い矢印の作り方を解説したいと思います。

この記事の目次を表示

1 くの字の矢印
2 三角の矢印
3 丸で囲んだ矢印
4 矢型の矢印（パターン1）
5 矢型の矢印（パターン2）
6 まとめ

くの字の矢印

くの字の形をした矢印の作り方は以下の通りです。
widthやheight、borderの値を変更することで様々なサイズを作ることが出来ます。

<span class="arrow -left"></span>
<span class="arrow -right"></span>
<span class="arrow -top"></span>
<span class="arrow -bottom"></span>

/*----- くの字の矢印 */
.arrow::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

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

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

三角の矢印

三角の形をした矢印の作り方は以下の通りです。
borderの値を変更することで様々なサイズを作ることが出来ます。

<span class="arrow -left"></span>
<span class="arrow -right"></span>
<span class="arrow -top"></span>
<span class="arrow -bottom"></span>

/*----- 三角の矢印 */
.arrow {
    width: 0;
    height: 0;
    border-style: solid;
}

/* 左向き */
.arrow.-left{
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid #000;
    border-left: 0;
}
/* 右向き */
.arrow.-right{
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid #000;
    border-right: 0;
}
/* 上向き */
.arrow.-top{
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 20px solid #000;
    border-top: 0;
}
/* 下向き */
.arrow.-bottom{
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 20px solid #000;
    border-bottom: 0;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

丸で囲んだ矢印

丸で囲んだ矢印の作り方は以下の通りです。
widthやheight、borderの値を変更することで様々なサイズを作ることが出来ます。

<span class="arrow -left"></span>
<span class="arrow -right"></span>
<span class="arrow -top"></span>
<span class="arrow -bottom"></span>

/*----- 三角の矢印 */
.arrow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arrow::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
}

/* 左向き */
.arrow.-left::before {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 8px solid #fff;
    border-left: 0;
    transform: translateX(-1px);
}
/* 右向き */
.arrow.-right::before {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #fff;
    border-right: 0;
    transform: translateX(1px);
}
/* 上向き */
.arrow.-top::before {
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 8px solid #fff;
    border-top: 0;
    transform: translateY(-1px);
}
/* 下向き */
.arrow.-bottom::before {
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 8px solid #fff;
    border-bottom: 0;
    transform: translateY(1px);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

矢型の矢印（パターン1）

矢型の形をした矢印の作り方は以下の通りです。
widthやheight、borderの値を変更することで様々なサイズを作ることが出来ます。

<span class="arrow -left"></span>
<span class="arrow -right"></span>
<span class="arrow -top"></span>
<span class="arrow -bottom"></span>

/*----- 三角の矢印 */
.arrow{
    line-height: 1;
    position: relative;
    background: #000;
}
.arrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    position: absolute;
    box-sizing: border-box;
}

/* 左向き */
.arrow.-left{
    width: 20px;
    height: 1px;
}
.arrow.-left::before {
    border-right: 0;
    border-bottom: 0;
    transform: rotate(-45deg);
    transform-origin: top left;
    top: 50%;
    left: -1px;
}
/* 右向き */
.arrow.-right{
    width: 20px;
    height: 1px;
}
.arrow.-right::before {
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    top: 50%;
    right: -1px;
}
/* 上向き */
.arrow.-top{
    width: 1px;
    height: 20px;
}
.arrow.-top::before {
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top left;
    top: 0;
    left: 1px;
}
/* 下向き */
.arrow.-bottom{
    width: 1px;
    height: 20px;
}
.arrow.-bottom::before {
    border-right: 0;
    border-top: 0;
    transform: rotate(-45deg);
    transform-origin: bottom left;
    bottom: 0;
    left: 1px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

矢型の矢印（パターン2）

もう一つの矢型の形をした矢印の作り方は以下の通りです。
こちらは先ほどの矢型の半分の形をしたバージョンになります。

<span class="arrow -left"></span>
<span class="arrow -right"></span>
<span class="arrow -top"></span>
<span class="arrow -bottom"></span>

/*----- 三角の矢印 */
.arrow{
    line-height: 1;
    position: relative;
}

/* 左向き */
.arrow.-left{
    width: 20px;
    height: 5px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(-45deg);
}
/* 右向き */
.arrow.-right{
    width: 20px;
    height: 5px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(45deg);
}
/* 上向き */
.arrow.-top{
    width: 5px;
    height: 20px;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    transform: skewY(-135deg);
}
/* 下向き */
.arrow.-bottom{
    width: 5px;
    height: 20px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skewY(135deg);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.