如何用css画爱心

如何用CSS画爱心

首先要清楚爱心是怎么组成的：其实就是由两个圆和一个正方形组成的。了解了这个思想下面就开始来画圆。
首先在body搭建基本的结构代码如下：

思路就是用个父级把这两个圆和正方形套起来，稍后还会用到这个父级。
第二步：用CSS样式来渲染。

首先用规范的写法，用通配符*{padding：0 margin：0;}把当前的页面所有元素的内外边距去掉。第二步给这个父级宽高，能更清楚的看见里面的元素，而且利用父级的属性给其加上相对定位， position: relative;再把每个子集加上绝对定位，也就是子绝父相布局。接下来画正方形

给这个正方形宽高100px 并填充为蓝色，利用绝对定位在父级里移动，效果如下。

接下来开始画圆；将两个圆一样一个叠半个进正方形里面。
第一个圆的代码如下:

第一个圆叠在正方形上面
效果如下：

接下是第二个圆，移到正方形左边
代码如下

这样爱心的效果就出来了

看起来这个爱心还有点问题，是躺着的，在父级里加上transform：rotate（45deg）翻转这个属性 再把边框去掉

效果展示

这样一个爱心就画好了