, создавая ответную диагональную линию в элементе

Question

Не уверен, что это возможно, но как бы я создал диагональную линию 1px, которая идет от верхнего левого элемента до нижнего правого, независимо от ширины и/или высоты этого элемента?

Answer 1

Вы можете сделать это несколькими способами.

1) фоновое изображение

1,1) SVG

Вы можете создать SVG прямой, как встроенный код и использовать его для рисования линии. Используя это, вы можете добиться приятных эффектов, таких как тень, градиент, пунктирная линия, ... и многое другое. Также возможно использовать svg внутри элемента css background-image.

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 (только на квадратной диве)

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)

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

запустить сниппета полную страницу и изменить размер окна браузера, чтобы проверить поведение на