Did CSS break my heart?

Question

After the question, I created a JSFiddle , but the result does not 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%; } 

Am I missing something, or is this love old (she's about 2 years old)?

Answer 1

I was messing around a bit with your JSfiddle, and I noticed that you are 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 a working JSfiddle: https://jsfiddle.net/arfc63Le/1/

Answer 2

You missed the second selector for your second CSS rule.

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> 

Answer 3

It looks like you missed one of the steps. This is not very obvious in another answer.

You need a copy

 #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 work ( 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 */ }