CSS có làm tan vỡ trái tim tôi không?

Question

Sau question này, tôi tạo ra một JSFiddle, nhưng sản lượng dường như không tốt như vậy:

Đây CSS là, lấy từ câu trả lời đó:

#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 bỏ lỡ một cái gì đó, hoặc tình yêu đó đã cũ (nó khoảng 2 tuổi)?

Answer 1

tôi đã rối tung xung quanh một chút với JSfiddle của bạn và tôi nhận thấy rằng bạn đã được chỉ vẽ một bên của trái tim của bạn :(

Đây là cập nhật CSS mà sẽ sửa chữa vỡ trái tim tội nghiệp của

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

Dưới đây là một liên kết đến JSfiddle làm việc: https://jsfiddle.net/arfc63Le/1/

Answer 2

Bạn đã bỏ chọn bộ chọn thứ hai cho quy tắc CSS thứ hai của mình.

Bốn quy tắc nên là:

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

Dưới đây là toàn bộ bản 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

Hình như bạn bỏ lỡ một trong những bước. Nó không phải là rất rõ ràng trong câu trả lời khác.

Bạn cần một bản sao của

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

cho #heart:after. Vì vậy, bạn cần phải thêm sau đây và nó hoạt động (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 */ 
}