在元素中创建响应对角线

Question

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

Answer 1

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

1）背景图像

1.1）SVG

可以创建一个SVG直接作为内联代码，并使用它用于绘制线。使用这个，你可以达到很好的效果，如阴影，渐变，虚线，等等。在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，...）

你也可以使用一个简单的图像作为背景图像上满格。

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％再次透明结束

（读更多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有位置相对的，并且宽度和高度被设置为
• 顶部和左侧设定为29％142％（28.7）

- > 142 = SQRT（100^2 + 100^2）（见phytagoras）

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

运行段整页和调整窗口的浏览器测试行为