在元素中创建响应式对角线

不确定这是否可行，但是如何创建一条从元素左上角到右下角的 1px 对角线，无论该元素的宽度和/或高度如何？

您可以通过多种方式做到这一点。

1）背景图片

1.1) SVG

您可以直接创建 svg 作为内联代码并使用它来绘制线条。使用它你可以实现漂亮的效果，如阴影、渐变、虚线……等等。也可以在 css 背景图像元素中使用 svg。

jsfiddle

<svg style='width: 100%; height: 100%;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(0,0,0);stroke-width:1"/>
</svg>

1.2）修复图像（png，jpg，...）

您还可以使用简单的图像作为整个 div 的背景图像。

jsfiddle

2）创建线性背景渐变

jsfiddle

.testDiv {
  width: 300px;
  height: 300px;
  background:linear-gradient(to bottom right, transparent calc(50% - 1px),  black calc(50% - 1px), black 50%, transparent 50%);
}

这是如何运作的？

• 您定义从左上角到右下角的渐变
• 颜色在 50% - 1 px 之前是透明的，从 50% 到结束再次是透明的

（阅读更多here)

3）旋转的内部div（仅在方形div上）

jsfiddle

调整 testDiv 大小时，该线应保持对角线。

.testDiv{
  width: 600px;
  height: 600px;
  background-color: gray;
}

.lineDiv {
  position: relative;
  top: 29%;
  left: 29%;
  width: 142%;
  height: 142%;
  border-left: solid thin blue;
  transform: rotate(45deg);
}

这是如何运作的？

• 外部 div 有一个大小（也可能是动态的）
• 内部 div 具有相对位置，宽度和高度设置为 142%
• 顶部和左侧设置为 29% (28.7)

-> 142 = sqrt(100^2 + 100^2)（参见植物门氏菌属)