CSS - Water drop

Code example for creating a water drop shape using HTML and CSS.

The HTML element has the class name "drop-water" set on a <div> tag which will be the drop element.

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

This CSS code creates a circular shape but leaves one corner square to make the water drop form.

The "transform" property rotates the element so the pointed part is facing up.

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