How to draw a heart using css only?

Question

How to draw a heart using only the css properties and html?
I have came across few codes to draw it but couldn't understand why do they use the before and after properties

css code

.heart {  
     background-color: red;  
      height: 30px;  
      transform: rotate(-45deg);  
      width: 30px;  
}  
.heart:before,  
.heart:after {    
      content: "";  
      background-color: red;  
      border-radius: 50%;  
      height: 30px;  
      position: absolute;  
      width: 30px;  
}  
.heart:before {    
      top: -15px;  
      left: 0;  
}

How the before and after properties work?
Would be helpful if someone could come up with alternate approach :)

Edits:- I just wanted to know why do we use the before and after properties and how it helps in creating this heart shape.
Also I'm looking for some easy and simple code(using only css) to obtain this shape.

Add your HTML to this, so we can understand the way you work. Also, before and after needs a display property. — Pierre Burton, Jul 06 '18 at 13:58
@PierreBurton they don't need a display property .. the position:absolute is enough to make them block by default — Temani Afif, Jul 06 '18 at 14:07

vaishali kapadia · Accepted Answer · 2018-07-06T14:03:27.033

You can do this with pseudo elements

To learn more about pseudo elements

https://www.w3schools.com/css/css_pseudo_elements.asp

https://css-tricks.com/almanac/selectors/a/after-and-before/

https://www.hongkiat.com/blog/pseudo-element-before-after/

body{
  padding-left:50px;
}

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;
}

<div></div>

Hope this helps :)

I wish I could have upvoted this answer but I don't have enough reputations to upvote this :( — 3251_ali, Jul 06 '18 at 14:22
@3251_ali Thanks mate for appreciation.. no worries, upvote when you have access in future.. hope soon ;) — vaishali kapadia, Jul 06 '18 at 14:38

Temani Afif · Answer 2 · 2018-07-06T14:17:51.803

2

Here is an idea with only background and less of code:

.heart {
  width:200px;
  height:200px;
  background:
   radial-gradient(circle at 50% 83%, red 29%, transparent 30%) -40px -100px/100% 100%,
   radial-gradient(circle at 50% 83%, red 29%, transparent 30%) 40px -100px/100% 100%,
   linear-gradient(to bottom left,red 43%,transparent 43%) bottom left/50% 50%,
   linear-gradient(to bottom right,red 43%,transparent 43%) bottom right/50% 50%;
  background-repeat:no-repeat;
}

<div class="heart">
</div>

You can integrate CSS variable to control the dimensions:

.heart {
  --d:200px;
  width:var(--d);
  height:var(--d);
  background:
   radial-gradient(circle at 50% 83%, red 29%, transparent 30%) calc(-1 * var(--d)/5) calc(-1 * var(--d)/2)/100% 100%,
   radial-gradient(circle at 50% 83%, red 29%, transparent 30%) calc(var(--d)/5) calc(-1 * var(--d)/2)/100% 100%,
   linear-gradient(to bottom left,red 43%,transparent 43%) bottom left/50% 50%,
   linear-gradient(to bottom right,red 43%,transparent 43%) bottom right/50% 50%;
  background-repeat:no-repeat;
  display:inline-block;
}

<div class="heart">
</div>
<div class="heart" style="--d:100px;">
</div>
<div class="heart" style="--d:50px;">
</div>

edited Jul 06 '18 at 14:17

answered Jul 06 '18 at 14:04

Temani Afif

245,468
26
309
415

1+, but the circles' position seems a little off, as they create some sort of edge, maybe some of the values need a little tweaking. – Maharkus Jul 06 '18 at 14:14
But this is not as perfect as I want it to be :( – 3251_ali Jul 06 '18 at 14:14
@Maharkus we can always adjust ;) this is a simple and fast idea to avoid a lot of code – Temani Afif Jul 06 '18 at 14:15
Yeah I know I'm nitpicking but I'm pretty sure OP doesn't have sufficient knowledge of CSS gradient, which is why I mentioned it :) – Maharkus Jul 06 '18 at 14:16
1

@Maharkus I updated to make it better ;) – Temani Afif Jul 06 '18 at 14:18
@3251_ali check again, it should be better ;) – Temani Afif Jul 06 '18 at 14:18

Maharkus · Answer 3 · 2018-07-06T14:05:44.463

The before and after tags are so called pseudo-elements. Here's a helpful resource with more information on them. Basically it creates an element, that isn't there in the actual DOM (the HTML structure) and allows you to apply CSS styling to it.

In this case the before and after are two circles.

Here's how a single pseudo element looks like in your case:

body {
  padding: 15px
}

.heart {
  background: green;
  width: 50px;
  height: 50px;
}

.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:after {
  left: 15px;
  top: 0px;
}

<div class="heart"></div>

And here's the complete heart itself:

body {
  padding: 15px;
}

.heart {
  background-color: green;
  height: 30px;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  left: 0;
  top: -15px;
}

.heart:after {
  left: 15px;
  top: 0;
}

<div class="heart"></div>

If you rotate the main block you get a rotated square. The two pseudo elements being circles create a heart with the div itself, if the position of each element is fitting. The reason your heart wasn't working properly is because the pseudo elements weren't placed correctly. Pushing the after element to the left fixes this problem.

Yes, @Temani_Afif covered this with gradients, alternatively, as already suggested SVG is also a possible approach. — Maharkus, Jul 06 '18 at 14:10

How to draw a heart using css only?

3 Answers3