CSS破坏了我的心吗？

Question

在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岁了）？

Answer 1

我和你的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/

Answer 2

您错过了第二个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 3

看起来你错过了其中一个步骤。在另一个答案中，这不是很明显。

您需要

的副本

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