CSS | たまご型(Egg)の作り方

CSS 図形デザイン,CSS

CSSでたまご型を作成する方法

CSSでたまご型を作成する方法を、border-radiusを使ったバージョンを紹介しています。

たまご型の作り方

CSSのborder-radiusを使ったたまご型のデザインサンプルです。

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

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

たまご型ですので、縦長の要素を作成、border-radiusで適度に角を丸めていきます。

たまご型の縦横比のサイズは1:1.5より少しだけ横広になるくらいが丁度よい気がします。

.egg-1 {
	width: 110px;
	height: 150px;
	border-radius : 80% 80% 80% 80% / 100% 100% 65% 65%;
	background-color: #ff7f50;
}

border-radiusの指定順序は左上、右上、右下、左下の順になっています。

CSS 図形デザイン,CSS

Posted by Yousuke.U