Divs mit Linie verbinden

[Rolf B]

Hallo hmm,

ich habe bei Stackoverflow eine Idee gefunden, wie man eine diagonale Linie durch ein div ziehen kann. Das Beispiel "durchkreuzt" die Box, du müsstest es aufteilen in .diagonalUp und .diagonalDown. Damit kannst Du ein div erzeugen, dessen gegenüberliegende Ecken an den Verbindungspunkt-Ankern deiner Elemente positioniert sind. Das ist aber aufwändig.

Mal angenommen, du möchtest (x1,y1) mit (x2,y2) verbinden. Dann musst Du zunächst feststellen, ob die Diagonale auf- oder absteigend ist, um den richtigen Gradienten auszuwählen.

x1<x2 und y1<y2 - absteigend
x1<x2 und y1>y2 - aufsteigend
x1>x2 und y1<y2 - aufsteigend
x1>x2 und y1>y2 - absteigend

Sobald x1 und x2, oder y1 und y2, nahe beieinander liegen, brauchst Du einen Plan B, weil dann die vom Gradienten gezeichnete Linie zu dünn wird.

.diagonalUp {
     background: 
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}
.diagonalDown {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}

Das solltest Du nicht verfolgen.

Rolf