CSSで矢印アイコン・三角アイコンを作る方法【コピペでできる】

ボタンや見出し、リンクなどのデザインによくある、くの字の矢印や三角のアイコンをCSSだけで作る方法をご紹介します。

今ではborderプロパティで簡単に作ることができるので、ぜひCSSで作りましょう。

Contents

矢印アイコンを作る方法
1. 矢印アイコンを擬似要素（::after）で使用する
三角アイコンを作る方法
1. 三角アイコンを擬似要素（::after）で使用する
まとめ

矢印アイコンを作る方法

まずはくの字の矢印アイコンをCSSで作る方法です。

それぞれ使用したい矢印のHTMLと、同じクラス名のCSSをコピーして使用してください。

See the Pen くの字アイコン by ayaka (@sae1212) on CodePen.

矢印の向きを変更するのは、transform: rotate()で向きを制御します。

矢印アイコンを擬似要素（::after）で使用する

くの字の矢印アイコンの応用として、擬似要素（::after）を使ったボタンアイコンは以下です。

See the Pen くの字アイコンボタン by ayaka (@sae1212) on CodePen.

.arrow-button{
    /* ボタンのCSS */
    background-color: #E53935;
    border-radius: 8px;
    box-shadow: 0 4px 0 #C62828;
    color: #fff;
    display: block;
    padding: 8px;
    position: relative; /* position: relative;で矢印の位置を基点とさせます */
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.arrow-button::after{
    /* 擬似要素で矢印アイコンをつくる */
    content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); /* rotate(45deg)で矢印を回転（向きを変更）させる */
}

.arrow-button:active{
    /* ボタンをクリックしたときに沈むように見える動き */
    box-shadow: 0 0 0 #C62828;
}

三角アイコンを作る方法

次は三角アイコンをCSSで作る方法です。

See the Pen 三角アイコン by ayaka (@sae1212) on CodePen.

三角アイコンを擬似要素（::after）で使用する

三角アイコンの応用として、擬似要素（::after）を使ったボタンは以下です。

See the Pen 三角アイコンボタン by ayaka (@sae1212) on CodePen.

.triangle-button::after{
    /* 擬似要素で三角アイコンをつくる */
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #fff;
    display: inline-block;
    width: 0;
    height: 0;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%); /* translateYのみ */
}

CSSの構成は矢印アイコンとほぼ同じで、アイコンを作るborderプロパティの記述とtransformの値が変わりました。