css制作表格斜线

使用伪元素和旋转

通过CSS的伪元素（::before或::after）结合transform: rotate()实现斜线效果。创建一个单元格，设置相对定位，通过伪元素生成斜线并调整角度和位置。

.cell-with-diagonal {
  position: relative;
  border: 1px solid #000;
  width: 100px;
  height: 50px;
}

.cell-with-diagonal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 141%; /* 勾股定理计算对角线长度 */
  height: 1px;
  background: #000;
  transform: rotate(26.5deg); /* 根据宽高比调整角度 */
  transform-origin: 0 0;
}

使用线性渐变

通过linear-gradient背景生成斜线。调整渐变角度和颜色分界点，实现斜线分割效果。

.cell-with-gradient {
  background: linear-gradient(
    to bottom right,
    transparent 49%,
    #000 49%,
    #000 51%,
    transparent 51%
  );
  border: 1px solid #000;
  width: 100px;
  height: 50px;
}

使用SVG内联背景

将SVG作为背景图像嵌入，通过路径绘制斜线。这种方法适合复杂斜线或需要精确控制的情况。

.cell-with-svg {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50'><path d='M0,0 L100,50' stroke='black' stroke-width='1'/></svg>");
  border: 1px solid #000;
  width: 100px;
  height: 50px;
}

注意事项

• 斜线角度需要根据单元格宽高比例调整，例如width: 100px; height: 50px时，角度约为26.5度（arctan(0.5)）。
• 伪元素方法需注意层级关系，避免遮挡单元格内容。
• 渐变方法在旧浏览器可能存在兼容性问题。
• SVG方法具有最佳兼容性，但需注意URL编码问题。