The Beginner’s guide to CSS Illustrations — Part 1

Learn how to create basic shapes

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: Ossian

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.

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

Rectangle

Follow the same steps which you did for square and then make one length longer than the other.

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

Circle

Create a square, and add 50% (radius should be half of diameter, in this case, height or width) border-radius on all sides to turn it to a nice circle.

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

Ellipse

Follow the same steps you did for drawing the circle, but, make one length larger than the other, just like a rectangle.

.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.

.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. Using different radii, you can even create asymmetric, distorted circles.

.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.

.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. Use different thickness for left and right borders to create scalene trapeziums.

.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.

.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!😎

Part-2

The Beginner’s guide to CSS Illustrations — Part 2

Resources

• Visit this codepen for more shapes like pentagon, hexagon, heart, infinity, etc.

Originally published at https://dev.to on December 16, 2020.