In this article, we’ll use CSS shapes and a few functional values to code different shapes.

Drawing Basic CSS Shapes

Let’s start with the basic shapes like square, rectangle, triangle, circle, and ellipse.

Square and Rectangle

Square and rectangle are the easiest shapes to make in CSS. All you need to do is to create a

and give it a height and a width.

HTML

CSS

Output:

Circle and Ellipse

You just need to assign a border-radius of 50% to a square and you’ll get a circle. Do the same with the rectangle to get an ellipse.

HTML

CSS

Output:

Triangles

We’ll use borders to create triangles. Wondering how it works? All you need to do is to set the width and height of the triangle to zero. It means, moving forward, the actual width of the element will be the width of the border. Also, you may already know that the border edges are 45-degrees diagonals to each other. Give different colors to each border and set any three of them to transparent. Ultimately, you’ll have your triangle.

HTML

CSS

Output:

You can play around with height and border-color to get different types of triangles. For instance, you can create a triangle pointing towards the upward direction by giving the border-bottom a solid color while all the other borders are set to transparent. Also, you can create a triangle pointing towards the right direction or a right-angle triangle by playing around with border-width and border-color.

HTML

CSS

Output:

Creating Advanced Shapes Using CSS

You can use ::before and ::after pseudo-elements to create advanced shapes. With the intelligent use of position and transform properties, you can easily build complex shapes using pure CSS.

Star Shape (5-Points)

You’ll need to manipulate the borders using the rotate value of the transform. The idea is to create two sides using a class=”star”, the other two sides using the ::after element, and the last side using the ::before element.

HTML

CSS

Output:

Pentagon

You can create a pentagon by combining a trapezoid and a triangle. Use border and position properties shape and group them.

HTML

CSS

Output:

Diamond

Group two triangles pointing upwards and downwards using position to create a diamond shape. Yes, we’ll use the border properties to create these triangles.

HTML

CSS

Output:

You can create a diamond shield shape by altering the height of the top-triangle as shown below:

HTML

CSS

Output:

Heart

The heart shape is a little hard but you can do it by using ::before and ::after pseudo-elements. You can use different values of transform to rotate them from different angles until they perfectly form a heart shape. Ultimately, you can set transform-origin to set the point around which the transformation is applied.

HTML

CSS

Output:

Experiment With Pure CSS Shapes

You should now be familiar with different pure CSS images that can be built by writing a few lines of code. Building a super-fast website isn’t a hectic task anymore as you know how to play around with the code. The best part is that you can resonate with the brand’s voice by manipulating different shapes and colors according to your requirement. Therefore, keep experimenting and discover new ways to draw awesome shapes purely by CSS.