在元素中创建响应对角线

Question

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

Answer 1

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

1)背景图像

1.1)SVG

您可以创建一个svg direct作为内联代码并使用它来绘制线条.使用它你可以实现很好的效果,如阴影,渐变,虚线......等等.在css background-image元素中使用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%到最终透明

(在这里阅读更多)

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)(参见phytagoras)