Photo by Nicola Fioravanti on Unsplash

Heart shape (HTML,CSS)

Labinot Jaha
Mar 26 · 2 min read

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.

Labinot Jaha

Written by

1992. Family first. Frontend developer. Gamer.

More From Medium

Top on Medium

Mar 25 · 22 min read

27K

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade