Question

如何仅使用 css 属性和html吸引人？
我遇到了一些代码来绘制它，但是不明白为什么他们使用之前和之后属性

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;  
}

之前和之后属性如何工作？
如果有人可以提出其他方法，这将是有帮助的：）

编辑：-我只是想知道为什么我们使用之前和之后属性，以及它如何帮助创建这种心形。
另外，我还在寻找一些简单的代码（仅使用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元素可解决此问题。

如何仅使用CSS画心？

3 个答案: