Erstellen einer reagierenden diagonalen Linie in Element

Question

Nicht sicher, ob dies möglich ist, aber wie würde ich eine 1px diagonale Linie erstellen, die von oben links von Element nach unten rechts geht, unabhängig von der Breite und/oder Höhe dieses Elements?

Answer 1

Sie dies auf vielfältige Weise tun können.

1) Hintergrundbild

1,1) SVG

Sie ein svg als Inline-Code direkt erstellen und verwenden sie die Linie zu ziehen. Damit können Sie schöne Effekte wie Schatten, Gefälle, gepunktete Linie, ... und vieles mehr erzielen. Es ist auch möglich, ein Svg innerhalb des css background-image Elements zu verwenden.

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) fixiert Bild (png, jpg, ...)

Sie können auch ein einfaches Bild als Hintergrundbild auf volle div verwenden.

jsfiddle

2) linearen Gradienten Hintergrund

jsfiddle

.testDiv { 
    width: 300px; 
    height: 300px; 
    background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%); 
} 

erstellen Wie das funktioniert?

• man einen Gradienten von links oben nach rechts unten definieren
• die Farbe transparent ist, bis 50% - 1 px und wieder transparent von 50%

zu beenden (weiter here)

3) gedreht innere div (nur auf quadratischen divs)

jsfiddle

Bei der Größenänderung des TestDiv sollte die Linie eine Diagonale bleiben.

.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); 
} 

Wie funktioniert das?

• die äußere div eine Größe hat, (vielleicht zu dynamisch sein)
• die innere div Position relativ hat und die Breite und Höhe werden auf 142% gesetzt
• oben und links auf 29% (28,7) eingestellt sind

-> 142 = sqrt (100^2 + 100^2) (siehe phytagoras)

Answer 2

Hintergrund-Bild von einem linearen Gradienten tun soll:

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

läuft Schnipsel ganze Seite und die Größe Verhalten Fenster des Browsers zu testen