纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

下面是关于“纯CSS画的基本图形”的完整攻略。

1. 矩形

矩形是最简单的基本图形之一，可以借助CSS中的border属性来实现。通过设置不同的border-width（边框宽度）、border-style（边框样式）和border-color（边框颜色）属性，可以绘制不同样式的矩形。例如，以下代码可以绘制一个红色填充的矩形：

.rectangle {
  width: 100px;
  height: 50px;
  background-color: red;
}

2. 圆形

CSS中没有直接绘制圆形的属性，但是可以利用border-radius属性来绘制圆形。border-radius可以设置四个角的弧度半径，如果将四个弧度半径都设置为正方形的边长的一半，则可以绘制出一个完整的圆形。以下代码可以绘制出一个直径为100px的蓝色填充圆形：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}

3. 三角形

三角形的绘制可以借助CSS中的border属性和transparent属性来实现。首先将一个矩形的一条边设置为透明（transparent），另外两条边设置为需要的颜色，然后旋转这个矩形即可得到一个三角形。以下代码可以绘制一个正向红色三角形：

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid red;
  border-bottom: 50px solid transparent;
}

4. 多边形

多边形的绘制同样可以借助CSS中的border属性和transparent属性来实现。首先将一个正方形每个角设置为透明，然后将需要显示的边边框设为需要的颜色，即可得到一个多边形。以下代码可以绘制一个六边形：

.hexagon {
  width: 100px;
  height: 55px;
  background-color: transparent;
  position: relative;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 27.5px solid blue;
  border-right: 50px solid transparent;
  border-bottom: 27.5px solid blue;
  border-left: 50px solid transparent;
}
.hexagon:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 27.5px solid blue;
  border-right: 50px solid transparent;
  border-bottom: 27.5px solid blue;
  border-left: 50px solid transparent;
}

5. 爱心

爱心的绘制可以利用CSS中的圆形和贝塞尔曲线来实现。通过组合两个圆形和一个贝塞尔曲线，在CSS中可以轻松地绘制出一个爱心。以下代码可以绘制一个红色填充爱心：

.heart {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(-45deg);
}
.heart:before,
.heart:after {
  content: "";
  border-radius: 50px 50px 0 0;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
}
.heart:before {
  top: 0px;
  left: 25px;
}
.heart:after {
  top: -25px;
  left: 0px;
}
.heart .curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 25px 0 0 25px;
  background-color: red;
  transform: rotate(-50deg);
}

以上就是关于“纯CSS画的基本图形”完整攻略。以上代码均为示例代码，实际使用时需要根据需要进行修改。