CSS - シェアボタンのアイコン

HTMLとCSSを使用してシンプルなシェアボタンのアイコンを描画する方法のコード例です。

HTMLコードはシェアボタンのアイコンを描画する要素となる<div>タグのクラス名 "share-btn-icon" を設定しています。

各パーツは<div>タグを3個指定しています。
順番は円のパーツ、上のバー、下のバーとなっています。

<div class="share-btn-icon">
	<div></div><div></div><div></div>
</div>

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
「--angle」では要素の回転を指定できます。
「--color」では基本カラーを指定できます。

円の部分は疑似要素「bifore」「after」を使って3つ分指定しています。
バーの部分は左側の円を中心点にrotate()プロパティで回転させています。

/* シェアボタンアイコン */
.share-btn-icon {
	--w: 300px; /* 基準サイズ */
	--color: #ff69b4; /* ベースカラー */
	--angle: 0deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* 円のパーツ */
.share-btn-icon div:nth-child(1) {
	position: absolute;
	top: 50%;
	left: 15%;
	transform: translateY(-50%);
	width: 20%;
	height: 20%;
	background-color: var(--color);
	border-radius: 50%;
}

.share-btn-icon div:nth-child(1)::before {
	content: "";
	position: absolute;
	top: -125%;
	left: 250%;
	width: 100%;
	height: 100%;
	background-color: var(--color);
	border-radius: 50%;
}

.share-btn-icon div:nth-child(1)::after {
	content: "";
	position: absolute;
	top: 125%;
	left: 250%;
	width: 100%;
	height: 100%;
	background-color: var(--color);
	border-radius: 50%;
}

/* 棒のパーツ A */
.share-btn-icon div:nth-child(2) {
	position: absolute;
	top: -10%;
	left: 22.5%;
	width: 5%;
	height: 60%;
	background-color: var(--color);
	transform-origin: center bottom;
	transform: rotate(63deg);
}

/* 棒のパーツ B */
.share-btn-icon div:nth-child(3) {
	position: absolute;
	top: -10%;
	left: 22.5%;
	width: 5%;
	height: 60%;
	background-color: var(--color);
	transform-origin: center bottom;
	transform: rotate(117deg);
}