サイトコーディングで頻出！HTML・CSSで作成した矢印アイコン（背景なし）のソースコードを紹介！

2023年11月26日
コラム
HTML/CSS

コラム

1 はじめに
2 矢印アイコン（背景なし）
3 他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

はじめに

今回はサイトコーディングで頻出の矢印アイコンをHTML・CSSで作成したのでソースコードと一緒にご紹介します。

borderの幅や、色は適宜調整ください。

矢印アイコン（背景なし）

上向き矢印アイコン（背景なし）

<span class="icon-up"></span>

.icon-up::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-top: 10px solid currentColor;
    border-right: 10px solid currentColor;
    transform: translate(-50%,-35%) rotate(-45deg);
}

下向き矢印アイコン（背景なし）

<span class="icon-down"></span>

.icon-down::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-top: 10px solid currentColor;
    border-right: 10px solid currentColor;
    transform: translate(-50%,-65%) rotate(135deg);
}

下向き矢印アイコンの使用例

下記記事にあるような「もっと見る」ボタンで使用されます。

「もっと見る」をクリックするとn件ずつ記事が表示される機能を実装しました。ソースコードも紹介しています。

左向き矢印アイコン（背景なし）

<span class="icon-left"></span>

.icon-left::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-top: 10px solid currentColor;
    border-right: 10px solid currentColor;
    transform: translate(-35%,-50%) rotate(-135deg);
}

右向き矢印アイコン（背景なし）

<span class="icon-right"></span>

.icon-right::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-top: 10px solid currentColor;
    border-right: 10px solid currentColor;
    transform: translate(-65%,-50%) rotate(45deg);
}