フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

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

css
矢印

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

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

くの字の矢印

くの字の形をした矢印の作り方は以下の通りです。
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.

まとめ

いかがでしたか?

CSSだけで様々な形の矢印を作り出すことが出来ますね。
他にも多くの形の矢印を作ることが出来ます。機会があれば他のパターンもご紹介したいと思います。