CSS讓我傷心了嗎？

在此之後question，我創建了一個JSFiddle，但輸出似乎不那麼好：CSS讓我傷心了嗎？

這裏是CSS，從答案有采取：

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

難道我錯過了什麼，或者愛情變老了（大約2歲）？

來源

2016-03-23 gsamaras

在提琴的CSS是drastica與你鏈接的問題中的CSS不同。如果您將問題中的CSS複製到小提琴中，則呈現效果良好。 – meagar

@meagar我*認爲*我正確地cp了代碼。然而，有人澄清了這些評論，似乎它包含了一個可能的解決方案，將在稍後檢查！ – gsamaras

1爲華麗的標題。 -2，因爲它似乎只是代表。 – Jonathan

我瞎搞與你的jsfiddle了一下，我注意到，你只繪製你的心臟的一側:(

這裏的更新CSS，這將解決您的窮破心臟

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

下面就來工作的jsfiddle鏈接：https://jsfiddle.net/arfc63Le/1/

來源

2016-03-23 22:43:08 RobIsAnxious

您錯過了第二個CSS規則的第二個選擇器。

四個規則應該是：

以下是完整的演示：

#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>

來源

2016-03-23 22:40:55 tzi

作品，謝謝你tzi！ – gsamaras

看起來你錯過的步驟之一。在另一個答案中它不是很明顯。

你需要的

#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:after。所以，你需要添加以下和它的作品（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 */ 
}

來源

2016-03-23 22:40:56 khuderm

CSS讓我傷心了嗎？

回答

相關問題