CSS | 葉っぱ型（leaf）の作り方

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

CSSで葉っぱ型の要素を作成する方法を紹介しています。

葉っぱ型の作り方

CSSのborderのサイズを変更した4パターンの葉っぱの形を作成してみました。

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

HTMLは4種類分のdivタグを追加しています。

<div class="leaf-1"></div>
<div class="leaf-2"></div>
<div class="leaf-3"></div>
<div class="leaf-4"></div>

widthとheightはそのままで、border-radiusで葉っぱの太さを調節しています。

transform: rotate()はデフォルト値が指定してありますが、角度を変更する時用です。

.leaf-1 {
	width: 100px;
	height: 100px;
	border-radius: 0 70px;
	background-color: #1f801f;
	transform: rotate(0deg);
}

.leaf-2 {
	width: 100px;
	height: 100px;
	border-radius: 0 80px;
	background-color: #259925;
	transform: rotate(0deg);
}

.leaf-3 {
	width: 100px;
	height: 100px;
	border-radius: 0 90px;
	background-color: #2bb32b;
	transform: rotate(0deg);
}

.leaf-4 {
	width: 100px;
	height: 100px;
	border-radius: 0 100px;
	background-color: #32cd32;
	transform: rotate(0deg);
}

5枚の葉っぱを回転させてみた

5枚の葉っぱを回転させてみたバージョンです。

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

葉っぱの部分は子要素としていますので、HTMLでdivタグを5つ追加しています。

<div class="leaf-1">
	<div></div><div></div><div></div><div></div><div></div>
</div>

「transform-origin: right bottom」で回転する基準値、デフォルトの中央から軸を右下に変更します。

葉を5枚360度回転させるので360/5=72、1枚おきに72度間隔で回転させています。

中心からの回転だと重なりますので、葉の色を変えてみました。

.leaf-1 {
	width: 200px;
	height: 200px;
	position: relative;
	transform: rotate(0deg);
}

.leaf-1 div{
	width: 80px;
	height: 80px;
	position: absolute;
	border-radius: 0 70px;
	background-color: #259925;
	transform-origin: right bottom;
}

.leaf-1 div:nth-of-type(1) {
	transform: rotate(0deg);
	background-color: #1f801f;
}

.leaf-1 div:nth-of-type(2) {
	transform: rotate(72deg);
	background-color: #32cd32;
}

.leaf-1 div:nth-of-type(3) {
	transform: rotate(144deg);
	background-color: #259925;
}

.leaf-1 div:nth-of-type(4) {
	transform: rotate(216deg);
	background-color: #2bb32b;
}

.leaf-1 div:nth-of-type(5) {
	transform: rotate(288deg);
	background-color: #32cd32;
}