如何在包含图片子元素的容器内绘制右上至左下的对角线？

下面分享几种实用的纯前端实现方案，不用额外依赖图片资源：

方法一：CSS伪元素+旋转 #

给容器设置相对定位，用伪元素生成一条线，通过旋转和定位让它刚好覆盖对角线区域：

<div class="img-container">
  <img src="你的图片地址" alt="示例图片">
</div>

.img-container {
  position: relative;
  display: inline-block; /* 让容器适配图片尺寸 */
}

.img-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 141%; /* 对角线长度约为容器宽高的√2倍 */
  height: 2px; /* 控制线的粗细 */
  background-color: #000; /* 控制线的颜色 */
  transform: rotate(-45deg);
  transform-origin: top right;
}

方法二：线性渐变背景 #

直接给容器添加渐变背景，利用渐变的颜色分界画出对角线，这种方式最简洁：

<div class="img-container">
  <img src="你的图片地址" alt="示例图片">
</div>

.img-container {
  position: relative;
  display: inline-block;
}

.img-container::after {
  content: '';
  position: absolute;
  inset: 0; /* 覆盖整个容器 */
  background: linear-gradient(to bottom left, 
    transparent calc(50% - 1px), 
    #000 calc(50%), 
    transparent calc(50% + 1px)
  );
  pointer-events: none; /* 避免遮挡图片的点击交互 */
}

方法三：内嵌SVG元素 #

如果需要更灵活的线条样式（比如虚线、圆角线），可以在容器里直接嵌入SVG线元素：

<div class="img-container">
  <img src="你的图片地址" alt="示例图片">
  <svg class="diagonal-line" viewBox="0 0 100 100">
    <line x1="100" y1="0" x2="0" y2="100" stroke="#000" stroke-width="2" />
  </svg>
</div>

.img-container {
  position: relative;
  display: inline-block;
}

.diagonal-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

你可以根据需求调整线的颜色、粗细：伪元素方法可添加border-style: dashed改成虚线；渐变方法可调整颜色透明度；SVG方法支持更多复杂线条样式。

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