Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich mit CSS einen diagonalen Linienhintergrund auf einem DIV?

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

Mary-Kate Olsen
Freigeben: 2024-12-08 18:13:11
Original
152 Leute haben es durchsucht

How to Create a Diagonal Line Background on a DIV using CSS?

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%);
}
Nach dem Login kopieren

Hinweis: Ein HTML-Beispiel wäre:

<textarea class="crossed"></textarea>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage