如何在动态div中绘制从左上到右下的对角线？

以下是几种无需复杂JS、纯CSS实现的简便方案：

1. 线性渐变（最简洁，无需额外元素） #

直接给目标div添加背景渐变，通过颜色断点控制线条粗细和颜色，适配任意宽高比的容器：

.container {
  width: 100%;
  height: 300px; /* 可根据需求调整高度 */
  /* 从左上到右下的黑色1px线条 */
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    #000 50%,
    transparent calc(50% + 0.5px)
  );
}

<div class="container"></div>

这种方法不需要额外子元素，代码量极少，线条不会因容器缩放变形。

2. 伪元素+Transform（灵活控制线条样式） #

如果需要调整线条粗细、添加阴影等样式，用伪元素实现更灵活：

.container {
  width: 100%;
  height: 300px;
  position: relative;
  /* 可选：添加边框方便查看容器范围 */
  border: 1px solid #eee;
}

.container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* √2≈1.414，确保线条覆盖容器对角线 */
  width: 141.4%;
  height: 0;
  /* 自定义线条样式 */
  border-bottom: 2px solid #2196f3;
  box-shadow: 0 0 3px rgba(33, 150, 243, 0.5);
  /* 居中后旋转45度 */
  transform: translate(-50%, -50%) rotate(45deg);
}

<div class="container"></div>

该方案支持修改线条颜色、粗细、阴影等样式，同时适配任意宽高的容器。

3. 子元素边框模拟（适合正方形容器） #

如果你的div是正方形，用子元素边框配合旋转也能快速实现：

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid #eee;
}

.line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: 2px solid #ff5722;
  transform-origin: top left;
  transform: rotate(45deg);
}

<div class="container">
  <div class="line"></div>
</div>

注意：此方法仅适用于正方形容器，非正方形场景下线条无法完全贴合对角线。

内容的提问来源于stack exchange，提问作者Leon