在网页开发中，我们经常会遇到需要在正方形容器内绘制对角线的需求，比如制作特殊的卡片装饰、图标元素等。借助CSS的原生特性，我们可以不引入额外HTML标签和图片，仅用少量样式就能优雅实现这个效果，下面介绍几种常用的实现方案。
方案一：使用伪元素+transform旋转
这是最常用也最灵活的实现方式，通过给正方形容器添加伪元素，设置伪元素的宽高为容器的对角线长度，再旋转45度即可实现对角线效果。
具体实现步骤如下：
- 先定义正方形容器的基础样式，设置固定的宽高和相对定位
- 使用
::before或者::after伪元素，设置绝对定位，宽高等于正方形对角线长度 - 通过
transform: rotate(45deg)旋转伪元素，调整位置使其刚好覆盖正方形的对角线 - 最后设置伪元素的背景色或者边框，即可呈现对角线效果
对应的CSS代码如下：
/* 正方形容器基础样式 */
.square {
width: 200px;
height: 200px;
position: relative;
border: 1px solid #ccc;
overflow: hidden; /* 隐藏超出容器的伪元素部分 */
}
/* 伪元素实现对角线 */
.square::before {
content: '';
position: absolute;
/* 对角线长度计算：sqrt(200² + 200²) ≈ 282.84px */
width: 283px;
height: 1px;
background-color: #ff0000;
/* 定位到正方形中心 */
top: 50%;
left: 50%;
/* 旋转45度，同时调整偏移让线刚好覆盖对角线 */
transform: translate(-50%, -50%) rotate(45deg);
transform-origin: center center;
}
如果需要绘制另一条对角线，只需要再添加一个伪元素，旋转角度改为-45度即可，示例代码如下：
.square::after {
content: '';
position: absolute;
width: 283px;
height: 1px;
background-color: #00ff00;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transform-origin: center center;
}
方案二：使用线性渐变背景
如果不想使用伪元素，也可以直接通过linear-gradient线性渐变属性来绘制对角线，这种方式代码更简洁，不需要处理定位和旋转逻辑。
核心思路是利用线性渐变的角度特性，设置渐变角度为45度，让两种颜色的过渡刚好形成一条对角线的分割线。如果需要绘制纯色的对角线，可以设置渐变的两个颜色在极小的范围内过渡，视觉上就形成了一条实线。
对应的CSS代码如下：
.square-gradient {
width: 200px;
height: 200px;
border: 1px solid #ccc;
/* 45度线性渐变，前半部分透明，后半部分红色，过渡区间设为0.1%让线更清晰 */
background: linear-gradient(
45deg,
transparent 49.95%,
#ff0000 49.95%,
#ff0000 50.05%,
transparent 50.05%
);
}
如果需要绘制另一条对角线，只需要把渐变角度改为-45度即可，示例代码如下：
.square-gradient-two {
width: 200px;
height: 200px;
border: 1px solid #ccc;
background:
linear-gradient(
45deg,
transparent 49.95%,
#ff0000 49.95%,
#ff0000 50.05%,
transparent 50.05%
),
linear-gradient(
-45deg,
transparent 49.95%,
#00ff00 49.95%,
#00ff00 50.05%,
transparent 50.05%
);
}
两种方案对比
我们可以通过下表对比两种方案的优缺点，方便根据实际场景选择：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 伪元素+transform | 可以单独控制对角线的样式，比如线宽、颜色、虚线等，灵活性高 | 需要计算对角线长度，代码相对多一点 | 需要自定义对角线样式，比如虚线、不同线宽的情况 |
| 线性渐变背景 | 代码简洁，不需要额外计算，直接设置角度即可 | 对角线样式调整不够灵活，只能实现实线效果 | 只需要简单实线对角线，追求代码简洁的场景 |
注意事项
在使用伪元素方案时，需要注意给正方形容器设置overflow: hidden，避免旋转后的伪元素超出容器范围影响布局。另外如果正方形的尺寸是动态变化的，伪元素的宽度也需要动态计算，可以通过CSS变量来统一维护尺寸，避免重复修改。
如果使用线性渐变方案，渐变的过渡区间不要设置太大，否则对角线会变粗，一般设置为0.1%左右就能得到清晰的细线效果。同时如果容器有圆角，线性渐变方案可能会出现边缘不贴合的问题，这种情况更适合用伪元素方案。
CSS正方形绘制对角线样式transform属性伪元素修改时间：2026-06-23 20:18:35