Home / Articles / Programming languages / Markup languages / HTML & CSS / How to draw a heart using only CSS

How to draw a heart using only CSS

How to draw a heart using only CSS
 
How to draw a heart using only CSS
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


The present article is intended for demonstration purposes and shows how to simply draw a heart using only CSS.

All styles of the heart shown below are applied to one div element.

The heart consists of two rectangles which overlay each other. Both rectangles have two mirrored rounded angles on the same side and have different inclination angles. Also they have the same color which makes them look like a heart.

CSS code:

div {
  position: relative;
  width: 100px;
  height: 175px;
  background-color: green;
  -webkit-border-radius: 50px 50px 0 0;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
}

div:before {
  position: absolute;
  width: 175px;
  height: 100px;
  left: 0;
  bottom: 0;
  content: "";
  background-color: green;
  -webkit-border-radius: 50px 50px 0 0;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 0 50px 50px 0;
}
Solid heart

Live demo

If you want to see the structure of the heart, just change the color of the second rectangle which overlays the first one. The color must be changed from green to red.

Add the following styles to the ones above:

div:before {
  background-color: red;
}
Varicolored heart

Live demo


 

Read also

How to draw stars using only CSS

How to draw stars using only CSS

How to draw a diamond using only CSS

How to draw a diamond using only CSS

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation