The Beginner's guide to CSS Illustrations - Part 1
Tags: html, css, webdev, tutorial
Published: 2020-12-16 04:36:23

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

{% codepen https://codepen.io/shunyadezain/pen/MWypjVW %}
<figcaption>Author: <a href="https://codepen.io/shunyadezain">Shunya Koide</a></figcaption>

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.
```html
<div class="square"></div>
```
```css
.square {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ptbhvzeym6j4qk8kmsv.png)

### Rectangle
Make the square longer on one side to get a rectangle.
```html
<div class="rectangle">div>
```
```css
.rectangle {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zi974wvct4i129x7v938.png)

### Circle
Create a square, and add **50%** `border-radius` on all sides to turn it to a nice circle.
```html
<div class="circle"></div>
```
```css
.circle {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9m9pjokkx93o17ztv8u1.png)

### Ellipse
Follow the same steps you did for drawing the circle, but on a *rectangle*.
```html
<div class="ellipse"></div>
```
```css
.ellipse {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
  border-radius: 50%;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/txlix8h1ilpf9p6pe579.png)

### 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.
```html
<div class="pill"></div>
```
```css
.pill {
  background-color: dodgerblue;
  height: 100px;
  width: 200px;
  border-radius: 50000px; /*Any large value will do the trick*/
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/24lqxmuaea5q1955be2n.png)

### Egg
To create this shape, you need to use different values for [horizontal and vertical radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius).
```html
<div class="egg"></div>
```
```css
.egg {
  height: 200px;
  width: 150px;
  background-color: dodgerblue;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4lx74l68z1qlqgk2gamh.png)

### 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. 
```html
<div class="triangle"></div>
```
```css
.triangle {
  height: 0px;
  width: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 173px solid dodgerblue;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ku5pnmrciz5k0ha4w22v.png)

This pen by [Chris Coyier](https://css-tricks.com/author/chriscoyier/) will help you understand easily:
{% codepen https://codepen.io/chriscoyier/pen/lotjh %}

### Trapezium
The trapezium is exactly same as the triangle, except it has a non-zero width.
```html
<div class="trapezium"></div>
```
```css
.trapezium {
  height: 0px;
  width: 150px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 150px solid dodgerblue;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7p91xwleupzkrt0tjq4f.png)

### Parallelogram
We use the `transform: skew()` property to create the parallelogram. You can also create the **rhombus** similarly by using equal height and width.
```html
<div class="parallelogram"></div>
```
```css
.parallelogram {
  height: 125px;
  width: 200px;
  background-color: dodgerblue;
  transform: skew(-20deg);
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wcbold749mvbeqg3vipr.png)

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](https://codepen.io/dasshounak/pen/JjRXMav)🚀***