CSS | ひょうたん型（Gourd）の作り方

2023-02-18CSS 図形デザイン,CSS

ひょうたん型（Gourd）をCSSで作成する方法とサンプルコードを紹介しています。

ひょうたん型（Gourd）の作り方

HTMLとCSSだけで作るひょうたん型（Gourd）のサンプルです。

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

HTMLには、コンテナとなる要素、クラス名「.container」を設置しています。
ひょうたんの部分はdiv要素のクラス名「.gourd」のみです。

<div class="container">
	<div class="gourd"></div>
	<div class="gourd"></div>
	<div class="gourd"></div>
</div>

ＣＳＳではコンテナになる部分に背景色が必要です。コンテナ部分にfilter()を使いblur()でぼかして、contrast()で調節します。
ひょうたんになる色は特定の色じゃないとなかなか、くっきりした色味が出せませんので注意して下さい。

/* container */
.container {
	position: relative;
	width: 100vw;
	height: 300px;
	background-color: #FFF;
	filter: blur(6px) contrast(30);
}

/* Gourd upper part */
.gourd {
	position: absolute;
	top: 20px;
	left: 60px;
	width: 70px;
	height: 70px;
	border-radius : 50%;
	background-color: #0000ff;
}

/* lower part */
.gourd::before {
	content: "";
	position: absolute;
	top: 70px;
	left: -20px; /* upper width - lower width / 2 */
	width: 110px;
	height: 110px;
	border-radius : 50%;
	background-color: #0000ff;
}

以下に少しカラーバリエーションを用意しています。

/* Color variations */
.gourd:nth-child(1) {
	top: 20px;
	left: 40px;
	background-color: #0000ff;
}
.gourd:nth-child(1)::before {
	background-color: #0000ff;
}

.gourd:nth-child(2) {
	top: 20px;
	left: 170px;
	background-color: #32cd32;
}
.gourd:nth-child(2)::before {
	background-color: #32cd32;
}

.gourd:nth-child(3) {
	top: 20px;
	left: 300px;
	background-color: #ff0000;
}
.gourd:nth-child(3)::before {
	background-color: #ff0000;
}