如何使用css画一个心

我们都知道css非常的强大,如果你使用的好的话,基本上你可以画出任何你想要的图形,现在网上就有好多用css来画出的卡通人物等。那么如何使用css画一个心呢?


  1. 需要知道rotate这个属性,我们需要将图形进行旋转

  2. 需要知道心由那些基本图形组成的,这里我们将心分割成一个正方形和2个半圆

  3. 通过调整三个图形的位置构成一个心形


首先,我们画出三个基本图形,分别是2个圆和一个正方形

image.png

然后我们调整他们的角度45deg

image.png

之后我们调整它们的距离,就是margin;这个时候调整它们的间距他们会斜着走,因为的角度是倾斜的。


image.png

最后,调整剩下一个圆形的位置,就可以画出一个心形。


image.png


html代码如下:

<div id="rotate">

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

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

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

</div>


css代码如下:

* {

  margin: 0;

  padding: 0;

}


.heart {

  width: 100px;

  height: 100px;

  background-color: red;

  /* border: 1px solid black; */

}


#square,

#circle2 {

  margin-top: -50px;

  float: left;

}


#circle2 {

  margin-left: -50px;

}


#circle1,

#circle2 {

  border-radius: 50px

}


#rotate {

  transform: rotate(-45deg);

  width: 150px;

  height: 150px;

  margin: 30px;

}


当然了,我们还可以只放一个html元素,然后通过伪类:after:before来画两个圆,更多css的用法,需要我们用心去发现。