The Beginner's guide to CSS Illustrations - Part 1

Part 1 - The Basics

Creating CSS illustrations can be interesting and fun. If you visit CodePen or any other similar website, you will find how incredible designs and artworks can be created with CSS. Let me show you an example.

Author: Shunya Koide

Cool. Isn't it? You can also add some animation and bring life to it. Trust me, once you start creating your own illustrations, you will get addicted to it. It also helps to skyrocket your CSS skills, especially, working with pseudo-elements, shadows, positioning and border-radius. Now, let's see how we can create our own illustrations.

---

In this post, I will show you how to create the most basic shapes. To creates shapes, we use divs along pseudo-elements ::before and ::after.

Square

The square is the simplest shape to draw with CSS. Just add a height and equal width, then, add a background-color, and your square is complete.

<div class="square"></div>

.square {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
}

Rectangle

Make the square longer on one side to get a rectangle.

<div class="rectangle">div>

.rectangle {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
}

Circle

Create a square, and add 50% border-radius on all sides to turn it to a nice circle.

<div class="circle"></div>

.circle {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

Ellipse

Follow the same steps you did for drawing the circle, but on a rectangle.

<div class="ellipse"></div>

.ellipse {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
  border-radius: 50%;
}

Pill

Now, this shape is very common, especially for buttons. You can call it pill or a capsule shape. The trick to create this is to add a much larger border-radius on all sides.

<div class="pill"></div>

.pill {
  background-color: dodgerblue;
  height: 100px;
  width: 200px;
  border-radius: 50000px; /*Any large value will do the trick*/
}

Egg

To create this shape, you need to use different values for horizontal and vertical radius.

<div class="egg"></div>

.egg {
  height: 200px;
  width: 150px;
  background-color: dodgerblue;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Triangle

Triangles are a little different than other shapes as we draw them with borders. See the code below, height and width are set to zero. It might be a little difficult for you to understand how its forming. Tweak the code and see what happens when you change the values. Try setting a height and width other than zero. Change the border widths. Observe the changes, and you will understand how it works.

<div class="triangle"></div>

.triangle {
  height: 0px;
  width: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 173px solid dodgerblue;
}

This pen by Chris Coyier will help you understand easily:

Trapezium

The trapezium is exactly same as the triangle, except it has a non-zero width.

<div class="trapezium"></div>

.trapezium {
  height: 0px;
  width: 150px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 150px solid dodgerblue;
}

Parallelogram

We use the transform: skew() property to create the parallelogram. You can also create the rhombus similarly by using equal height and width.

<div class="parallelogram"></div>

.parallelogram {
  height: 125px;
  width: 200px;
  background-color: dodgerblue;
  transform: skew(-20deg);
}

Making CSS art is just a matter of combining these shapes in interesting and fun ways. In the next post, I will show you how you can use pseudo-elements I talked about earlier to simplify complex illustrations and keep the html clean. Having said that, I hope you learned something new, and this motivated you to create something awesome and beautiful.

Happy Coding!😎

---

You can find code snippets for more shapes like the heart, stars, infinty, hexagon, octagon, etc. on my codepen🚀