Wie erstelle ich diagonale Linien in einem DIV-Hintergrund nur mit CSS?

Diagonale Linien im DIV-Hintergrund mit CSS erstellen

Problem:

Erweitern Sie ein DIV mit ein Vorschaufeld, um diagonale Linien im Hintergrund anzuzeigen, wie im nebenstehenden Bild zu sehen. In der Anfrage wird die Verwendung von CSS nur dann angegeben, wenn dies möglich ist.

Lösung mit CSS3 Linear-Gradient:

Um die Linien automatisch an die Abmessungen des Elements zu skalieren, verwenden Sie die Kombination von CSS3 Linear-Gradient mit calc(). Diese Lösung ist mit verschiedenen Versionen von Chrome kompatibel:

.crossed {
     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%),
         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%);
}

<textarea></textarea>

Das obige ist der detaillierte Inhalt vonWie erstelle ich diagonale Linien in einem DIV-Hintergrund nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!