CSS 伤了我的心吗？答案

【问题标题】：Did CSS break my heart?CSS 伤了我的心吗？
【发布时间】：2016-07-11 10:33:54
【问题描述】：

按照这个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 岁）？

【问题讨论】：

小提琴中的 CSS 与您链接的问题中的 CSS 截然不同。如果您将问题中的 CSS 复制到您的小提琴中，它会呈现正常。
@meagar 我认为我正确地编写了代码。但是，有人清理了 cmets，它似乎包含一个潜在的解决方案，稍后会检查！
1 代表华丽的标题。 -2 因为它看起来很糟糕。
@gsamaras 您在 10 分钟前编辑了答案。
How to create CSS heart? / Why is this CSS creating a heart shape?的可能重复

标签： html css css-shapes css-transforms

【解决方案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/

【讨论】：

【解决方案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%;
}

&lt;div id="heart"&gt;&lt;/div&gt;

【讨论】：

【解决方案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 */
}

【讨论】：