how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

How to Create Shapes in CSS [💗 🔺 ⭐]

Hello Friends 🙏, I think CSS is the most underrated language. I see developers trying to do crazy stuff using JavaScript or jQuery to achieve something that can be done in CSS with some tricks.

In this CSS Tutorial, we will learn how to create shapes in CSS:😎
Create Heart Shape in CSS
Create Triangle Shape in CSS
Create Star Shape in CSS

Chalo suru kiya jaye!🍻 Lets start! 🕺.

How to Create Shapes in CSS

Creating Shapes using CSS is mostly a trick to manipulate the HTML elments and render them as a shape.

Create Heart Shape in CSS

This trick involves positioning of multiple elements.
Create a square and rotate it by 45degree.

how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

Then use pseudo element :after to create a circle and push it out from left by 50%.

how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

Then use pseudo element :before to create a circle and push it out from top by 50%.

how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

Tada! we got 💗.

Link to CodePen sample: Create Heart 💗 shape in CSS

Create Triangle Shape in CSS

This trick involves border-radius of the element.
Define width and height of the element as 0. And then add color to one of the border and to rest add transparent color, to hide them.

how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

Moving the border color will change the direction of the triangle.

how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

Link to CodePen sample: Create Triangle 🔺 shape in CSS

Create Star Shape in CSS

This trick involves positioning of multiple elements.
Create a trianlge and rotate it by 35degree.

how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

Use pseudo element :before to create one more triangle and position it like below.

how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

Now use another pseudo element :after to create one more triangle and position it like below.

how to create shapes in css,create heart shape in css,create triangle shape in css,create star shape in css,css tutorial for beginners

Tada! we got ⭐

Link to CodePen sample: Create Star⭐ shape in CSS

Thanks 🙏.

Liked this tutorial? Check more here -> CSS Turorials.

Leave a Comment

Your email address will not be published. Required fields are marked *