Material Box

Material Box

WEB Design & Material Images

CSS - Fan shape


A code example to create a fan shape using HTML and CSS.

The HTML element has a <div> tag with class name "fan" for the fan shape element.

<div class="fan"></div>

This CSS code example draws the fan shape using the "border" property.
It specifies the size of two sides with "border-width" and rounds one side with "border-radius" to form the fan shape.

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

/* Fan shape */
.fan {
	border: solid #ff7f50;
	border-width: 200px 200px 0 0;
	border-radius: 200px 0 0 0;
	transform: rotate(45deg);
	margin-bottom: 50px;

CSS - Fan shape

TitleCSS - Fan shape