Hat CSS mein Herz gebrochen?

Question

Nach dieser question, habe ich eine JSFiddle, aber der Ausgang scheint nicht so gut:

Hier ist die CSS, es aus der Antwort genommen:

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

Habe ich etwas vermissen, oder die Liebe wurde alt (es ist ungefähr 2 Jahre alt)?

Answer 1

Ich war ein bisschen herum mit Ihrem JSfiddle Messing und ich bemerkt, dass Sie nur eine Seite des Herzens zeichneten :(

Hier ist die aktualisiert CSS, die Ihr schlechtes gebrochenes Herz

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

Hier ist ein Link auf die Arbeits JSfiddle beheben: https://jsfiddle.net/arfc63Le/1/

Answer 2

Sie haben den zweiten Selektor für Ihre zweite CSS-Regel verpasst.

sollten die vier Regeln sein:

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

ist die vollständige 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

wie Sie sieht einen der Schritte verpasst. Es ist nicht sehr offensichtlich in der anderen Antwort.

Sie benötigen eine Kopie

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

für #heart:after. So müssen Sie die folgenden hinzuzufügen und es funktioniert (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 */ 
}