CSS - 雫

HTMLとCSSで雫（水滴）の形状を作成するコード例です。

HTML要素には、雫の要素となる<div>タグにクラス名 "drop-water" を設定しています。

<div class="drop-water"></div>

このCSSコード例では「border-radius」プロパティで円形を作成する際に一辺の角は丸みを付けない事で、水滴（雫）の形を作っています。

「transform」プロパティで尖った部分が上になるように要素の角度を調節します。

/* 雫 */
.drop-water {
	width: 200px;
	height: 200px;
	background-color: #00bfff;
	border-radius: 2% 50% 50% 50%;
	transform: rotate(45deg);
}