Photo by Nicola Fioravanti on Unsplash

Heart shape (HTML,CSS)

Labinot Jaha

--

Today I decided to spread some love because the world needs it. This time I made a heart shape using only HTML and CSS.

Let's begin...

First the HTML code of the Heart

So what I did is that I made 2 divs with the same sizes, border-radius, and background color and a parent div that has position relative. The parent div has position relative so I can move the other 2 divs slightly wherever I want.

CSS code of the Heart

So what is happening here is that left and right classes have almost the same CSS, the width, height, background color, etc. What’s interesting is that both divs have top borders with radius of 50% and are rotated on specific degrees so they look like heart, and positioning them in the right place.

I hope this will make use of you one day, there is the codepen link to check how it works https://codepen.io/lbnt/pen/ZEGmwVm.

--

--