Wie erstelle ich mit CSS einen diagonalen Linienhintergrund auf einem DIV?

Diagonale Linien zu einem DIV-Hintergrund mit CSS hinzufügen

Frage:

Wie können Sie diagonale Linien zum Hintergrund hinzufügen? eines DIV-Elements, das nur CSS verwendet?

Hinweis: Der gewünschte Effekt ist wie gezeigt im bereitgestellten Bild.

Lösung:

Um sich automatisch an die Abmessungen des Elements anzupassen, verwenden Sie CSS3 linear-gradient und die calc()-Funktion, wie unten dargestellt:

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

Hinweis: Ein HTML-Beispiel wäre:

<textarea class="crossed"></textarea>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen diagonalen Linienhintergrund auf einem DIV?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!