{"id":485,"date":"2022-02-16T11:38:24","date_gmt":"2022-02-16T11:38:24","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=485"},"modified":"2022-02-16T11:51:05","modified_gmt":"2022-02-16T11:51:05","slug":"how-to-create-shapes-in-css-heart-triangle-star","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/how-to-create-shapes-in-css-heart-triangle-star\/","title":{"rendered":"How to Create Shapes in CSS [💗 🔺 ⭐]"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

In this CSS Tutorial<\/strong>, we will learn how to create shapes in CSS:😎
– Create Heart Shape in CSS<\/a>
– Create Triangle Shape in CSS<\/a>
– Create Star Shape in CSS <\/a><\/p>\n\n\n\n

Chalo suru kiya jaye!<\/strong>🍻 Lets start! <\/strong>🕺.<\/p>\n\n\n\n

How to Create Shapes in CSS<\/h2>\n\n\n\n

Creating Shapes using CSS is mostly a trick to manipulate the HTML elments and render them as a shape.<\/p>\n\n\n\n

Create Heart Shape in CSS<\/h2>\n\n\n\n

This trick involves positioning of multiple elements.
Create a square and rotate it by 45degree.<\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Then use pseudo element :after to create a circle and push it out from left by 50%.<\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Then use pseudo element :before to create a circle and push it out from top by 50%. <\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Tada! we got 💗.<\/p>\n\n\n\n

Link to CodePen sample: Create Heart 💗 shape in CSS<\/a> <\/p>\n\n\n\n

Create Triangle Shape in CSS<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Moving the border color will change the direction of the triangle.<\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Link to CodePen sample: Create Triangle 🔺 shape in CSS<\/a> <\/p>\n\n\n\n

Create Star Shape in CSS<\/h2>\n\n\n\n

This trick involves positioning of multiple elements.
Create a trianlge and rotate it by 35degree.<\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Use pseudo element :before to create one more triangle and position it like below.<\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Now use another pseudo element :after to create one more triangle and position it like below. <\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Tada! we got ⭐<\/p>\n\n\n\n

Link to CodePen sample: Create Star⭐ shape in CSS<\/a><\/p>\n\n\n\n

Thanks 🙏.<\/p>\n\n\n\n

Liked this tutorial? Check more here -> CSS Turorials<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this CSS Tutorial for Beginners, you will learn How to Create Shapes in CSS. Create Heart, Triangle & Star shape\u00a0using HTML & CSS.<\/p>\n","protected":false},"author":1,"featured_media":506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[47],"tags":[12,48,7,49,50],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/485"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=485"}],"version-history":[{"count":1,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/485\/revisions"}],"predecessor-version":[{"id":617,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/485\/revisions\/617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media\/506"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}