Czy CSS złamał mi serce?

Question

następstwie tego question, stworzyłem JSFiddle, ale wynik nie wydaje się tak dobrze:

Oto CSS, wzięty z odpowiedzi tam:

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

ja tęsknisz za coś lub ta miłość się starzeje (ma około 2 lat)?

Answer 1

ja bawić się trochę ze swoim JSfiddle i zauważyłem, że jesteś rysunek tylko po jednej stronie swojego serca :(

Oto aktualizowany CSS, który będzie naprawić słabe złamane serce

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

Oto link do JSfiddle pracy: https://jsfiddle.net/arfc63Le/1/

Answer 2

Pominąłeś drugi selektor dla twojej drugiej reguły CSS.

Cztery zasady powinny być:

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

Oto pełna 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

Wygląda na to, brakowało jednego z etapów. W innej odpowiedzi nie jest to oczywiste.

Musisz kopię

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

dla #heart:after. Więc trzeba dodać następujące i działa (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 */ 
}