The Wide World of CSS Shapes

Tools

Generators

There are a variety of generators that can be used to assist in creating shapes with CSS, here are a few that I think are helpful:

  • Clip Path Generator (Clippy): The clip-path property clips off part of an element, allowing it to show up as a different shape. Clippy writes the clip-path for you, with a visual interface.
  • CSS Triangle Generator: As the name implies, this makes generating triangles with CSS (not using clip-path) much easier by providing a visual interface.

CSS Selectors and Properties

These are concepts to keep in mind, that make creating shapes with CSS easier.

The basics

These are the simplest shapes, and the ones people are more likely to be comfortable with. All the more complicated shapes build upon these:

.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

Now that you’re comfortable with your arsenal of basic shapes, you might be wondering how to create shapes that are, well, cooler.

.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