如何只用css画一颗心？

Question

如何仅使用 css 属性和 html?
来画一颗心我遇到了一些代码来绘制它，但无法理解为什么他们使用 before 和 after 属性

css代码

.heart {  
     background-color: red;  
      height: 30px;  
      transform: rotate(-45deg);  
      width: 30px;  
}  
.heart:before,  
.heart:after {    
      content: "";  
      background-color: red;  
      border-radius: 50%;  
      height: 30px;  
      position: absolute;  
      width: 30px;  
}  
.heart:before {    
      top: -15px;  
      left: 0;  
}

before 和 after 属性如何工作？
如果有人能想出替代方法会很有帮助:)

编辑：- 我只是想知道为什么我们使用 before 和 after 属性以及它如何帮助创建这颗心形状。
此外，我正在寻找一些简单易行的代码（仅使用 css）来获得此形状。

Answer 1

你可以用伪元素做到这一点

To learn more about pseudo elements

https://www.w3schools.com/css/css_pseudo_elements.asp

https://css-tricks.com/almanac/selectors/a/after-and-before/

https://www.hongkiat.com/blog/pseudo-element-before-after/

body{
  padding-left:50px;
}

div {
  position: relative;
  width: 100px;
  height: 175px;
  background-color: green;
  -webkit-border-radius: 50px 50px 0 0;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
}

div:before {
  position: absolute;
  width: 175px;
  height: 100px;
  left: 0;
  bottom: 0;
  content: "";
  background-color: green;
  -webkit-border-radius: 50px 50px 0 0;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 0 50px 50px 0;
}

<div></div>

希望这对您有所帮助:)

Answer 2

before 和 after 标签是所谓的伪元素。 Here's 一个有用的资源，其中包含有关它们的更多信息。基本上它会创建一个元素，该元素不存在于实际的 DOM（HTML 结构）中，并允许您对其应用 CSS 样式。

在这种情况下，before 和 after 是两个圆圈。

在您的情况下，单个伪元素如下所示：

body {
  padding: 15px
}

.heart {
  background: green;
  width: 50px;
  height: 50px;
}

.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:after {
  left: 15px;
  top: 0px;
}

<div class="heart"></div>

这是完整的心脏本身：

body {
  padding: 15px;
}

.heart {
  background-color: green;
  height: 30px;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  left: 0;
  top: -15px;
}

.heart:after {
  left: 15px;
  top: 0;
}

<div class="heart"></div>

如果你旋转主块，你会得到一个旋转的正方形。如果每个元素的位置都合适，那么两个伪元素是圆圈，它们会创建一个带有 div 本身的心形。你的心脏不能正常工作的原因是因为伪元素没有正确放置。将 after 元素向左推可解决此问题。

Answer 3

这是一个仅包含背景且代码较少的想法：

.heart {
  width:200px;
  height:200px;
  background:
   radial-gradient(circle at 50% 83%, red 29%, transparent 30%) -40px -100px/100% 100%,
   radial-gradient(circle at 50% 83%, red 29%, transparent 30%) 40px -100px/100% 100%,
   linear-gradient(to bottom left,red 43%,transparent 43%) bottom left/50% 50%,
   linear-gradient(to bottom right,red 43%,transparent 43%) bottom right/50% 50%;
  background-repeat:no-repeat;
}

<div class="heart">
</div>

您可以整合CSS变量来控制维度：

.heart {
  --d:200px;
  width:var(--d);
  height:var(--d);
  background:
   radial-gradient(circle at 50% 83%, red 29%, transparent 30%) calc(-1 * var(--d)/5) calc(-1 * var(--d)/2)/100% 100%,
   radial-gradient(circle at 50% 83%, red 29%, transparent 30%) calc(var(--d)/5) calc(-1 * var(--d)/2)/100% 100%,
   linear-gradient(to bottom left,red 43%,transparent 43%) bottom left/50% 50%,
   linear-gradient(to bottom right,red 43%,transparent 43%) bottom right/50% 50%;
  background-repeat:no-repeat;
  display:inline-block;
}

<div class="heart">
</div>
<div class="heart" style="--d:100px;">
</div>
<div class="heart" style="--d:50px;">
</div>

如何只用css画一颗心？

How to draw a heart using css only?

html

css

css-shapes