CSS 魔法：绘制和风团扇，邂逅夏日清凉

在这个流金似火的盛夏，让我们抛却烦躁与闷热，一起用 CSS 的魔法绘制一柄精致的和风团扇，感受一份清凉与惬意吧！本次教程将带领你领略 CSS 自定义变量、伪元素内容写入和图形裁剪等技巧的巧妙运用，助你解锁 CSS 的更多可能性。

CSS 自定义变量：轻松掌控色彩与尺寸

为了方便后续代码的修改与维护，我们首先使用 CSS 自定义变量来定义和风团扇的基本色彩与尺寸。通过这种方式，只需在变量处进行调整，即可灵活控制团扇的外观。

:root {
  --primary-color: #FF7F50;
  --secondary-color: #FFD166;
  --handle-color: #9E9E9E;
  --fan-width: 200px;
  --fan-height: 200px;
  --handle-width: 20px;
  --handle-height: 80px;
}

伪元素内容写入：绘制团扇扇面

接下来，我们将使用伪元素 ::before 为团扇扇面添加内容。通过在伪元素中写入一段特定的文本，并将其进行图形裁剪，即可轻松实现团扇扇面的绘制。

.fan {
  position: relative;
  width: var(--fan-width);
  height: var(--fan-height);
}

.fan::before {
  content: "和";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: calc(var(--fan-width) / 4);
  text-align: center;
  line-height: var(--fan-height);
  transform: rotate(180deg);
}

图形裁剪：塑造团扇轮廓

为了完成和风团扇的绘制，我们需要对团扇的轮廓进行图形裁剪。通过使用 border-radius 属性，可以轻松实现团扇扇形轮廓的塑造。

.fan {
  border-radius: 50% 0% 0% 50%;
}

团扇柄的绘制

最后，我们为团扇添加一根手柄，使用 CSS 的 box-shadow 属性来模拟手柄的立体感。

.fan-handle {
  position: absolute;
  bottom: 0;
  left: calc(50% - var(--handle-width) / 2);
  width: var(--handle-width);
  height: var(--handle-height);
  background-color: var(--handle-color);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

成品展示

通过以上的 CSS 代码，我们成功绘制了一柄精致的和风团扇，它仿佛来自夏日祭典，为我们带来一丝清凉与惬意。

.fan {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50% 0% 0% 50%;
}

.fan::before {
  content: "和";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: #FF7F50;
  color: #FFD166;
  font-size: 50px;
  text-align: center;
  line-height: 200px;
  transform: rotate(180deg);
}

.fan-handle {
  position: absolute;
  bottom: 0;
  left: calc(50% - 10px);
  width: 20px;
  height: 80px;
  background-color: #9E9E9E;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}