Did CSS break my heart?

Question

Following this question, I created a JSFiddle, but the output doesn't seem so good:

Here is the CSS, taken from the answer there:

#heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin-top: 10px;
  /* leave some space above */
}

#heart:before {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 52px;
  height: 80px;
  background: red;
  /* assign a nice red color */
  border-radius: 50px 50px 0 0;
  /* make the top edge round */
}

#heart:before {
  -webkit-transform: rotate(-45deg);
  /* 45 degrees rotation counter clockwise */
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  /* Rotate it around the bottom-left corner */
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#heart:after {
  left: 0;
  /* placing the right part properly */
  -webkit-transform: rotate(45deg);
  /* rotating 45 degrees clockwise */
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  /* rotation is around bottom-right corner this time */
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

Did I miss something, or that love got old (it's about 2 years old)?

The CSS in your fiddle is drastically different from the CSS in the question you link. If you copy the CSS from the question into your fiddle, it renders fine. — user229044, Mar 23 '16 at 22:38
@meagar I *think* I cp'ed the code correctly. However, someone cleared up the comments and it seems that it contains a potentional solution, will check later! — gsamaras, Mar 23 '16 at 22:40
@Devrim, if you see the edit, I explained what I modified. Jonathan..please. :) — gsamaras, Mar 23 '16 at 22:44
10/10 clickbait title, would call it up again. Also spent too much time making a fixed [dabblet](http://dabblet.com/gist/0409c6ddb580b7b6a950) for it, I don't wanna toss a fourth "me too" solution at it haha — abluejelly, Mar 23 '16 at 22:47
I don't program for shaping a hear everyday @abluejelly, thanks a lot!! :) — gsamaras, Mar 23 '16 at 22:47
Possible duplicate of [How to create CSS heart? / Why is this CSS creating a heart shape?](http://stackoverflow.com/questions/17386168/how-to-create-css-heart-why-is-this-css-creating-a-heart-shape) — Jonathan, Mar 23 '16 at 23:20

RobIsAnxious · Accepted Answer · 2016-03-24T07:16:31.637

I was messing around a bit with your JSfiddle and I noticed that you were only drawing one side of your heart :(

Here's the updated CSS that will fix your poor broken heart

#heart:before, #heart:after {
 position: absolute;
 content: "";
 left: 50px;
 top: 0;
 width: 52px;
 height: 80px;
 background: red;
 /* assign a nice red color */
 border-radius: 50px 50px 0 0;
 /* make the top edge round */
}

Here's a link to the working JSfiddle: https://jsfiddle.net/arfc63Le/1/

tzi · Answer 2 · 2016-03-23T23:00:46.570

You missed the second selector for your second CSS rule.

The four rules should be:

#heart {}
#heart:before,
#heart:after {}
#heart:before [}
#heart:after {}

Here is the full demo:

#heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin-top: 10px;
}

#heart:before,
#heart:after {
  position: absolute;
  content: "";
  top: 0;
  width: 52px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}

#heart:before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

<div id="heart"></div>

score 0 · Answer 3 · answered Mar 23 '16 at 22:40

Looks like you missed one of the steps. It isn't very obvious in the other answer.

You need a copy of

#heart:before {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 52px;
  height: 80px;
  background: red;
  /* assign a nice red color */
  border-radius: 50px 50px 0 0;
  /* make the top edge round */
}

for #heart:after. So you need to add the following and it works (JSFiddle)

#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 52px;
  height: 80px;
  background: red;
  /* assign a nice red color */
  border-radius: 50px 50px 0 0;
  /* make the top edge round */
}

Did CSS break my heart?

3 Answers3

Linked