CSS | ハート型（Heart）の作り方

2023-11-08CSS 図形デザイン,CSS

CSS | ハート型（Heart）の作り方

CSSでハート型をプロパティを使って作成する方法と、clip-pathのpathを使って作成する方法の２通りを紹介しています。

ハート型の作り方

疑似要素を重ねて作成するハート型の作成方法を紹介しています。

See the Pen CSS Heart by yochans (@yochans) on CodePen.

HTMLは表示用と作業用のdivタグを記述。

<div class="container">
	<div class="heart-1"></div>
	<div class="heart-2"></div>
</div>

疑似要素のbeforeとafterそれぞれで作成した形状を重ねてハート型にしています。

各プロパティに指定している値でサイズ、丸みや角度、色などの調整つが可能となっています。

2つ目のハート柄は、beforeとafterで色を変えて各形状をわかりやすくしたものです。

.heart-1 {
	width: 120px;
	height: 120px;
	position: relative;
}

.heart-1::before {
	content: "";
	position: absolute;
	left: 60px; /* x位置 */
	top: 0; /* y位置 */
	width: 60px; /* 幅 */
	height: 100px; /* 高さ */
	background: #FF5252; /* 色 */
	border-radius: 100px 60px 0 0; /* 丸み */
	transform: rotate(-45deg); /* 角度調整 */
	transform-origin: 0 100%; /* 回転の基準点 */
}

.heart-1::after {
	content: "";
	position: absolute;
	left: 0; /* x位置 */
	top: 0; /* y位置 */
	width: 60px; /* 幅 */
	height: 100px; /* 高さ */
	background: #FF5252; /* 色 */
	border-radius: 60px 100px 0 0; /* 丸み */
	transform: rotate(45deg); /* 角度調整 */
	transform-origin: 100% 100%; /* 回転の基準点 */
}

新しいサイト「Material Box」にて更に多くの図形・マーク・アイコンデザインを紹介しています。
CSS – ハート型 | Material Box

ハート型の作り方（clip-pathバージョン）

clip-pathプロパティのpathを使ったハート型の作り方です。

CSSのclip-pathで指定できるpathはSVGコードで指定するpathと同じです。

See the Pen CSS Heart（path） by yochans (@yochans) on CodePen.

HTMLはそれぞれ違う形状のハート型のpathを表示するためのdivタグを記述。

<div class="container">
	<div class="heart-1"></div>
	<div class="heart-2"></div>
	<div class="heart-3"></div>
</div>

サンプルでは、それぞれ形状の違う3種類のハート型で作られたpathを表示しています。

SVGであればサイズはviewBoxで可変可能ですが、CSSの場合はwidthとheightはpathのサイズに合わせておく必要があります。
サイズを変更するにはtransformのscaleによる調節が可能です（他の方法は？）。

サンプルのpathは24pxサイズをベースに作成されていますので、widthとheightは24pxになります。

transformのscale()はパーセントでも指定可能ですが、1なら100％、サンプルは5ですので500％となり、表示されるハートのサイズは120px 120pxとなります。

marginなどで位置を調節する必要があります。

.heart-1 {
	width: 24px; /* pathのサイズ */
	height: 24px; /* pathのサイズ */
	background: #FF5252; /* 色 */
	clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
	transform: scale(5);
}

.heart-2 {
	width: 24px; /* pathのサイズ */
	height: 24px; /* pathのサイズ */
	background: #FF5252; /* 色 */
	clip-path: path("M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181");
	transform: scale(5);
}

.heart-3 {
	width: 24px; /* pathのサイズ */
	height: 24px; /* pathのサイズ */
	background: #FF5252; /* 色 */
	clip-path: path("M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z");
	transform: scale(5);
}

pathに関しては、SVGのpathとして多くのデザインが溢れかえっていますので、好みのものから作成する事が可能です。

SVGはHTMLに埋め込めますし、CSSは直接SVGファイルを指定する事も可能です。
SVGはサイズの大小はファイルサイズには大きく影響しませんので気にしなくて良いです。

SVGファイルと、そのデータを元に各画像ファイルに変換したものをダウンロードできるフリー素材サイトを作成しています。
よろしければ、使ってみて下さい。

CSS 図形デザイン,CSS

Posted by Yousuke.U