如何使用 CSS 制作一个简易爱心

分析：

• 爱心可以通过一个正方形 + 两个圆形组合成。

1. 先画一个正方形 + 圆形, 摆放位置如下:

1. 再添加上一个圆形。

1. 最后再将整个图形顺时针旋转 45 度即可。

初步实现

1. 先画一个正方形：

   #heart{
          height: 300px;
          width: 300px;
          border: 2px solid black;
       }

1. 给这个正方形的左边加行一个圆形. 这里使用伪类:before 来实现：

        #heart{
               height: 200px;
               width: 200px;
               border: 2px solid black;
               position: relative;
           }
       #heart:before{
           content: '';
           width: 200px;
           height: 200px;
           border: 2px solid black;
           border-radius: 50%; // 正方形加圆角变成圆
           position: absolute;
           left: -100px;  // 向左位移正方形一半的长度
       }

此时图形长这样：

1. 再添加一个圆形, 这里使用 after 伪类来实现。

      #heart{
               height: 200px;
               width: 200px;
               border: 2px solid black;
               position: relative;
           }
           // 这里偷个懒. 直接写一块了
       #heart:before,#heart:after{
           content: '';
           width: 200px;
           height: 200px;
           border: 2px solid black;
           border-radius: 50%;
           position: absolute;
           left: -100px;
       }
       // 第二个圆, 只需要向上位移正方形一半的高度
       #heart:after{
           left: 0;
           top: -100px;
       }

1. 最后一步, 旋转一下, 然后上个颜色. 去掉之前为了看清楚加的边框。

      /* 给 heart 进行旋转并加上颜色 */
     transform: rotate(45deg);
     background-color: red;

完整代码：