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

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

コラム

1 はじめに
2 矢印アイコン（円形ボーダーあり、背景なし）
3 矢印アイコン（円形、背景黒）
4 他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

はじめに

今回はサイトコーディングで頻出の矢印アイコンをHTML・CSSで作成したのでソースコードと一緒にご紹介します。今回のものは円形のborderで囲まれているものになります。borderの幅や、色は適宜調整ください。

矢印アイコン（円形ボーダーあり、背景なし）

上向き矢印アイコン（円形、ボーダーあり、背景なし）

<span class="icon-circle 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);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
    border-radius: 50%;
}

下向き矢印アイコン（円形、ボーダーあり、背景なし）

<span class="icon-circle 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);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
    border-radius: 50%;
}

左向き矢印アイコン（円形、ボーダーあり、背景なし）

<span class="icon-circle 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);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
    border-radius: 50%;
}

右向き矢印アイコン（円形、ボーダーあり、背景なし）

<span class="icon-circle 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);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
    border-radius: 50%;
}

矢印アイコン（円形、背景黒）

上向き矢印アイコン（円形、背景黒）

<span class="icon-circle icon-black 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);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
    border-radius: 50%;
}
.icon-black {
    color: #fff;
    background-color: #191919;
}

下向き矢印アイコン（円形、背景黒）

<span class="icon-circle icon-black 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);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
    border-radius: 50%;
}
.icon-black {
    color: #fff;
    background-color: #191919;
}

左向き矢印アイコン（円形、背景黒）

<span class="icon-circle icon-black 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);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
    border-radius: 50%;
}
.icon-black {
    color: #fff;
    background-color: #191919;
}

右向き矢印アイコン（円形、背景黒）

<span class="icon-circle icon-black icon-right">

.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);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
    border-radius: 50%;
}
.icon-black {
    color: #fff;
    background-color: #191919;
}

4方向のcssをまとめたソースコード

.icon-up::before,
.icon-down::before,
.icon-left::before,
.icon-right::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-top: 10px solid currentColor;
    border-right: 10px solid currentColor;
}
.icon-up::before {
    transform: translate(-50%,-35%) rotate(-45deg);
}
.icon-down::before {
    transform: translate(-50%,-65%) rotate(135deg);
}
.icon-left::before {
    transform: translate(-35%,-50%) rotate(-135deg);
}
.icon-right::before {
    transform: translate(-65%,-50%) rotate(45deg);
}
.icon-circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #191919;
}
.icon-circle {
    border-radius: 50%;
}
.icon-black {
    color: #fff;
    background-color: #191919;
}

他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

ソースコードまとめ

HTML・CSS ・JavaScriptソースコード紹介記事まとめ

実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。

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

はじめに

矢印アイコン（円形ボーダーあり、背景なし）

上向き矢印アイコン（円形、ボーダーあり、背景なし）

下向き矢印アイコン（円形、ボーダーあり、背景なし）

左向き矢印アイコン（円形、ボーダーあり、背景なし）

右向き矢印アイコン（円形、ボーダーあり、背景なし）

矢印アイコン（円形、背景黒）

上向き矢印アイコン（円形、背景黒）

下向き矢印アイコン（円形、背景黒）

左向き矢印アイコン（円形、背景黒）

右向き矢印アイコン（円形、背景黒）

4方向のcssをまとめたソースコード

他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

WordPressで子テーマを作成する動機と必要性と方法と子テーマを使用してどのようにカスタマイズをしていくか紹介！

WordPressプラグイン「Table of Contents Plus」を使用して作成した目次のレイアウトとソースコード

お問い合わせはこちら