纯CSS绘制正方形对角线技巧
本文介绍一种高效、简洁的CSS方法，在正方形中绘制一条精准的对角线，无需借助图片等外部资源。 避免使用图片的好处在于提高页面加载速度和灵活性。
传统方法，例如使用背景图片，往往不够灵活且影响性能。而利用CSS的linear-gradient函数，我们可以轻松实现这一效果。
核心代码及解析：
立即学习“前端免费学习笔记（深入）”；
通过巧妙运用linear-gradient的起始点、结束点和颜色，我们可以模拟出清晰的斜线。以下代码片段展示了具体实现：
.square {
width: 100px;
height: 100px;
background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent 0);
}
代码说明：
-
.square: 定义一个名为square的CSS类，用于设置正方形样式。 -
width: 100px; height: 100px;: 设置正方形的宽高为100像素 (可根据需要调整)。 -
background: linear-gradient(...): 使用线性渐变创建对角线。 -
to right bottom: 指定渐变方向为从左上到右下。 -
transparent calc(50% - 0.5px): 渐变起始颜色为透明，宽度精确控制在50%减去0.5像素，以避免锯齿。 -
currentColor calc(50% + 0.5px): 渐变中间颜色继承父元素颜色 (currentColor)，宽度为50%加0.5像素，形成清晰的线条。 -
transparent 0: 渐变结束颜色为透明。
0.5px 的微调至关重要，它能够有效地消除由于像素化导致的对角线模糊或锯齿现象。
应用此CSS样式的正方形元素将呈现一条清晰、精准的对角线，且颜色可通过修改父元素颜色轻松更改。 这种方法简洁高效，完全避免了图片的使用。
