The Wide World of CSS Shapes

Tools

Generators

CSS Selectors and Properties

The basics

.rectangle {
width: 120px;
height: 80px;
background: #ffd5cd;
}
.square {
width: 100px;
height: 100px;
background: #efbbcf;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #c3aed6;
}
.ellipse {
width: 120px;
height: 80px;
border-radius: 50%;
background: #ffd5cd;
}

Commonly used shapes

.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 60px 100px 60px;
border-color: transparent transparent #efbbcf transparent;
}
.triangle-clip {
width: 100px;
height: 100px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: #c3aed6;
}
.heart {
position: relative;
background: #ffd5cd;
height: 100px;
width: 100px;
transform: rotate(-45deg);
margin: 3rem;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: #ffd5cd;
border-radius: 50%;
height: 100%;
width: 100%;
}
.heart:before {
left: 0;
top: -50%;
}
.heart:after {
left: 50%;
}
.crescent {
width: 100px;
height: 100px;
border-radius: 50%;
background: transparent;
box-shadow: 20px 20px 0 0 #efbbcf;
}
.star {
width: 100px;
height: 100px;
left: 20%;
top: 23%;
background: #c3aed6;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}

More clip-path shapes

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Other Cool Shapes

.curved-line {
width: 100px;
height: 100px;
border-radius: 50%;
background: transparent;
border: 6px solid;
border-color: #efbbcf transparent transparent transparent;
}
.leaf {
width: 100px;
height: 100px;
border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
background: #c3aed6;
}
.blob {
width: 100px;
height: 100px;
border-radius: 46% 54% 64% 36% / 61% 44% 56% 39%;
background: #ffd5cd;
}

Software Engineering Student

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store