Question

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

Answer 1

您可以通过多种方式执行此操作。

1）背景图片

1.1）SVG

您可以创建svg direct作为内联代码并使用它来绘制线条。使用它你可以实现很好的效果，如阴影，渐变，虚线......等等。在css background-image元素中使用svg也是可行的。

<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）

- ＆GT; 142 = sqrt（100 ^ 2 + 100 ^ 2）（见phytagoras）

Answer 2

来自线性渐变的背景图像应该：

＆＃13;

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 */

＆＃13;

运行代码段整页并调整窗口浏览器的大小以测试行为

在元素中创建响应对角线

2 个答案: