CSS | たまご型（Egg）の作り方
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の指定順序は左上、右上、右下、左下の順になっています。
新しいサイト「Material Box」にて更に多くの図形・マーク・アイコンデザインを紹介しています。
CSS – たまご型 | Material Box