CSS - チェックマーク

HTMLとCSSを使用してチェックマークのアイコンを描画する方法のコード例です。

このHTMLコードはチェックマークのアイコンを描画する要素となる<div>タグのクラス名 "check-mark-icon" を設定しています。

<div class="check-mark-icon"></div>

疑似要素「before」で左側、「after」で右側の四角形を作成しチェックマークのアイコンとしています。

カスタムプロパティ「--w」にて、全体の幅と高さ、各パーツのサイズ、位置を調整しています。

「transform-origin」では回転の基準点を指定しています。

/* チェックマーク */
.check-mark-icon {
	--w: 300px; /* 基本サイズ */
	position: relative;
	width: var(--w);
	height: calc(var(--w));
}

/* 左パーツ */
.check-mark-icon::before {
	content: "";
	position: absolute;
	bottom: 15%;
	left: 36%;
	width: 20%;
	height: 55%;
	background-color: #00fa9a;
	transform-origin: center bottom;
	transform: rotate(-45deg);
}

/* 右パーツ */
.check-mark-icon::after {
	content: "";
	position: absolute;
	bottom: 15%;
	left: 22%;
	width: 20%;
	height: 85%;
	background-color: #00fa9a;
	transform-origin: center bottom;
	transform: rotate(45deg);
}