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

Question

不确定是否可能，但我该如何创建一个1像素的对角线，它从元素的左上方到右下方，无论该元素的宽度和/或高度如何？

- mikeriley131

Answer 1

你可以用多种方式来实现这个。

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像素之前和50%到末尾之后都是透明的

(了解更多点击此处)

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)（参见勾股定理）

- Jarlik Stepsto

---

啊，SVG解决方案完美地满足了我的需求。谢谢！ - mikeriley131

Answer 2

应该使用线性渐变的背景图片：

body {
  background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%) yellow;
  /*demo purpose */
  height:50%;
  width:50%;
  margin:auto;
  }

html {
  display:flex;
  height:100vh;
  background:white;
  }
/* end demo purpose */

运行片段并调整浏览器窗口大小以测试行为

- G-Cyrillus