DEV Community

loading...
Cover image for The Beginner's guide to CSS Illustrations - Part 1
ReThink Programming

The Beginner's guide to CSS Illustrations - Part 1

snkds profile image Shounak Das Updated on ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode
.square {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Rectangle

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

<div class="rectangle">div>
Enter fullscreen mode Exit fullscreen mode
.rectangle {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Circle

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

<div class="circle"></div>
Enter fullscreen mode Exit fullscreen mode
.circle {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Ellipse

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

<div class="ellipse"></div>
Enter fullscreen mode Exit fullscreen mode
.ellipse {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
.pill {
  background-color: dodgerblue;
  height: 100px;
  width: 200px;
  border-radius: 50000px; /*Any large value will do the trick*/
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Egg

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

<div class="egg"></div>
Enter fullscreen mode Exit fullscreen mode
.egg {
  height: 200px;
  width: 150px;
  background-color: dodgerblue;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
.triangle {
  height: 0px;
  width: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 173px solid dodgerblue;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
.trapezium {
  height: 0px;
  width: 150px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 150px solid dodgerblue;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
.parallelogram {
  height: 125px;
  width: 200px;
  background-color: dodgerblue;
  transform: skew(-20deg);
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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🚀

Discussion (2)

pic
Editor guide
Collapse
snkds profile image
Shounak Das Author

Share your CSS artworks here 👇

Collapse
johnnyfekete profile image
Johnny Fekete

my current project: csschristmascalendar.com - building it only with HTML + CSS ;)