CSS中如何优雅地在正方形内绘制一条对角线？

巧妙运用CSS绘制正方形对角线，无需图片或SVG！本文提供一种高效、轻量级的CSS线性渐变方案，完美解决网页设计中正方形对角线绘制难题。

避免使用图片或SVG带来的资源加载和维护问题，CSS线性渐变提供更简洁、高效的解决方案。关键在于精准控制渐变角度、宽度以及巧妙运用transparent关键字。

实现步骤：

首先，创建一个正方形容器元素（例如div），并添加一个类名（例如square）。然后，使用以下CSS代码：

.square {
  background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent 0);
}

代码解析：

• linear-gradient(to right bottom, ...)：定义渐变方向为从左上到右下。
• transparent calc(50% - 0.5px)：渐变起始部分透明，宽度为正方形一半减去0.5像素，修正像素偏差。
• currentColor calc(50% + 0.5px)：渐变中间部分使用元素当前颜色，宽度为正方形一半加0.5像素。
• transparent 0：渐变结束部分透明。

通过此方法，即可在正方形内绘制一条清晰、精准的对角线，无需额外资源，充分展现CSS的强大功能和灵活性。 这为前端开发者提供了一个优雅而高效的解决方案。