CSS | 二重丸（Double circle）の作り方

2021-06-19CSS 図形デザイン,CSS

二重丸（Double circle）をCSSで作成を紹介しています。

二重丸の作り方

CSSの疑似要素、borderプロパティを利用した二重丸を作成する方法です。

See the Pen CSS | Double circle by yochans (@yochans) on CodePen.

ボーダーの太さに違いがある3つのタイプを作成しています。

<div class="double-circle-1"></div>
<div class="double-circle-2"></div>
<div class="double-circle-3"></div>

本体の要素に外枠の円、疑似要素のbeforeに内枠の円を指定しています。

「box-sizing: border-box」を指定していますが、これは他の要素との位置調整をしやすくするためです。
疑似要素のbeforeは「position: absolute」で絶対値にて位置を指定します。

疑似要素にしている内側のボーダーの位置調整（topとleft）の数値は以下の式で算出可能です。

(( base width – width ) – border-width * 2) / 2

例1だと((150-120)-5*2)/2 – Google 検索で10となります。

ボーダー細めの2重丸

.double-circle-1 {
	width: 150px;
	height: 150px;
	position: relative;
	border: solid #4169e1 5px;
	border-radius: 50%;
	box-sizing: border-box;
}

.double-circle-1::before {	
	content: "";
	width: 120px;
	height: 120px;
	position: absolute;
	top: 10px;
	left: 10px;
	border: solid #4169e1 5px;
	border-radius: 50%;
	box-sizing: border-box;
}

ボーダー普通の2重丸

.double-circle-2 {
	width: 150px;
	height: 150px;
	position: relative;
	border: solid #32cd32 10px;
	border-radius: 50%;
	box-sizing: border-box;
}

.double-circle-2::before {	
	content: "";
	width: 120px;
	height: 120px;
	position: absolute;
	top: 5px;
	left: 5px;
	border: solid #32cd32 10px;
	border-radius: 50%;
	box-sizing: border-box;
}

ボーダー太めの2重丸

ボーダーを15pxまで太くした際、ボーダー同士が重なる状態手前までいきましたので、内側の円のサイズ（before）を縮小しています。

.double-circle-3 {
	width: 150px;
	height: 150px;
	position: relative;
	border: solid #fa8072 15px;
	border-radius: 50%;
	box-sizing: border-box;
}

.double-circle-3::before {	
	content: "";
	width: 110px;
	height: 110px;
	position: absolute;
	top: 5px;
	left: 5px;
	border: solid #fa8072 15px;
	border-radius: 50%;
	box-sizing: border-box;
}