Mostly when I heard the name CSS , I hyped up for graphical design . Creating shapes , cards and probably many other things too.

So if you want a quick jump tutorial through making graphics , then let's start with shapes !

New to HTML and CSS ?

Check out my channel for more HTML and CSS guides 👇

youtube.com/channel/UCWw7u5X8FILQ3zStUkxLVRw

Whether you are making a landing page or a personal website , shapes are always a necessity when it comes to good styling .

Now , we all might've known how to create shapes digitally when we were young . You might've used software like MS Paint to draw shapes , but in CSS making shapes is totally different story. Thus today I'll teach you some cool shapes to make in CSS , and if you know some of the following shapes , give yourself a pat on the back !

So let's begin !

1) Squares

Squares are somewhat the easiest to make in CSS . That is because any element generated onto the webpage is a block level element by default.

To make a square , begin with an element , I'll choose a div here:

HTML Code :

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

CSS Code :

.square{
height:400px;
width:400px;
background: red;
}

Now what is going on here is that we first make an element . As it does not has any content , it won't show up hence we style it with a height and width . Now of course , they both should be of the same measurement , other wise you'll end up making a rectangle , which is pretty nice if you achieved that .👌

Finally , every element must have a background color otherwise it's "box" won't show up.

Easy right ?

2) Circles

Making circles are just as easy as making squares . Squares have sides , whereas circles don't . So technically , we'll have to bend our square's sides .

To make a circle , code the same markup as you did for the square , except that the CSS will be slightly different :

HTML Code :

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

CSS Code :

.circle{
height:400px;
width:400px;
background: red;
border-radius: 100%;
}

Notice the difference ? All we have done is that we gave the element a border-radius property which makes it round.

Why we use the value 100 here ? That's because it give the element full roundness . Although , this can be achieved by setting the percent value at 50% or 100% .

2) Parallelograms

The name is self-explanatory , it is basically a shape with the opposite sides parallel to each other. Hmm , reminds me of squares and rectangles , don't they have this feature too ?

Well yes , but in a parallelogram , the main distinction is that it has the sides on slight tilt or angled. They are you could say , skewed. So all we need to do is to skew the sides of the squares or rectangles , right ?

And in CSS we have the exact property to do this trick.

HTML Code :

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

CSS Code :

.parallelogram{
height:100px;
width:100px;
background: cyan;
transform: skewX(-20deg);
}

The transform property you see here transforms the element is various ways . Thus we choose the skew X which skews the element on the X-axis . Then in brackets , we enter the value of degree we want the element to skew , like 20deg , 70deg , -40deg , etc.

If you had liked this post then feel free to play with these shapes and experiment making new ones !

I hope you enjoyed this tutorial and I'll see you in Part 2 ! 👋

Part 2 👇

Shapes to make in CSS | Part 2