When it comes to CSS, we can make cool shapes. They are often used for some web design elements. But some people love to even make art with them!
We'll start with the basics of some shapes you can make with CSS. Throughout this series, we'll look at some more advanced shapes and how you can create them.
In todays article:
Squares with CSS permalink
Let's start with the shape of all shapes. The square is used for a lot of other shapes.
It's as simple as having an element that has an equal width/height.
This will result in a basic square:
Rectangles with CSS permalink
From the square, we can make a rectangle by adjusting the width or height. Making one of those bigger will give us a rectangle.
Circles with CSS permalink
Now for one of my favorites, a circle. It's a versatile element to use for avatars or buttons.
It can be created by using the square but adding a
border-radius to it.
Ovals with CSS permalink
And equally, we can add a border-radius to our rectangle to make oval shapes.
Demonstration of CSS Shapes permalink
I also made this Codepen for you to play around with, have some fun exploring these basic shapes, and already think about how other shapes will work.