如何仅使用 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

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

了解更多关于伪元素的信息

• 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

这是一个只有背景，代码较少的想法：

.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>

Answer 3

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 元素推到左边可以解决这个问题。