HTML – CSS破坏了我的心吗？

概述在这个 question之后,我创建了一个 JSFiddle,但输出似乎不太好： 这是CSS,取自那里的答案： #heart { position: relative; width: 100px; height: 90px; margin-top: 10px; /* leave some space above */}#heart:before { position: 在这个 question之后,我创建了一个 JSFiddle,但输出似乎不太好：

这是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岁)？

解决方法 我和你的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/

总结

以上是内存溢出为你收集整理的HTML – CSS破坏了我的心吗？全部内容，希望文章能够帮你解决HTML – CSS破坏了我的心吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。