Ich habe ein Layout erstellt, in dem das Hintergrundelement leicht nach links oben gedreht ist.

Aber ich habe gesehen, dass Sie etwas mit SVG machen können, aber noch nie damit gearbeitet haben.

Im Moment verwende ich die folgende Technik:

.background {
  width:100%;
  margin-left: -160px;
  margin-right: -160px;
  transform: rotate(20deg);
}

und drehen Sie die Elemente in die entgegengesetzte Richtung, in der sie gerade horizontal ausgerichtet sind.

Aber es passt nicht wirklich zu meinem Bildschirm, wenn ich verkleinere oder viele negative Ränder brauche, aber ich denke nicht, dass dies ein guter Weg ist, dies zu lösen.

Hier ist ein CodePen wie die Dinge im Moment sind.

Below sollte so aussehen:

Das obige Bild ist nur eine Kachel als Beispiel.Hier ist, wie es tatsächlich auf der Seite aussehen würde. Die schwarzen Streifen sind in voller Breite Ihres Bildschirms ist die Idee.

Neinhover Effekte werden für die Form benötigt, die nur statisch sein muss.