Il CSS mi ha spezzato il cuore?

Question

A seguito di questa question, ho creato un JSFiddle, ma l'uscita non sembra così buono:

Ecco la CSS, preso dalla risposta c'è:

#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 perdere qualcosa, o quell'amore è invecchiato (ha circa 2 anni)?

Answer 1

ero nei guai un po 'con il vostro JSfiddle e ho notato che si stava solo disegnando un lato del tuo cuore :(

' qui il aggiornato CSS che risolverà il vostro povero cuore spezzato

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

Ecco un link al JSfiddle lavorare: https://jsfiddle.net/arfc63Le/1/

Answer 2

Hai perso il secondo selettore per la tua seconda regola CSS.

Le quattro regole dovrebbero essere:

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

Ecco la demo completa:

#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

Sembra che vi siete persi uno dei passaggi. Non è molto ovvio nell'altra risposta.

È bisogno di una copia di

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

per #heart:after. Quindi è necessario aggiungere la seguente e funziona (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 */ 
}