CSS 伤了我的心吗？

Question

按照这个 question, I created a 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岁了）？

Answer 1

您错过了第二个 CSS 规则的第二个选择器。

四个规则应该是：

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

这是完整的演示：

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

您似乎错过了其中一个步骤。在另一个答案中不是很明显。

您需要一份

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

Answer 3

我在摆弄你的 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 的 link：https://jsfiddle.net/arfc63Le/1/

CSS 伤了我的心吗？

Did CSS break my heart?

html

css

css-transforms

css-shapes