如何仅用CSS代码在正方形中绘制一条精准的对角线？-css教程-PHP中文网

如何仅用CSS代码在正方形中绘制一条精准的对角线？

碧海醫心

发布： 2025-03-08 10:46:12

原创

856人浏览过

如何仅用css代码在正方形中绘制一条精准的对角线？

纯CSS绘制正方形对角线技巧

本文介绍一种高效、简洁的CSS方法，在正方形中绘制一条精准的对角线，无需借助图片等外部资源。避免使用图片的好处在于提高页面加载速度和灵活性。

传统方法，例如使用背景图片，往往不够灵活且影响性能。而利用CSS的linear-gradient函数，我们可以轻松实现这一效果。

核心代码及解析：

立即学习“前端免费学习笔记（深入）”；

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

查看详情

通过巧妙运用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: 渐变结束颜色为透明。