Wie kann ich nur mit CSS diagonale Linien auf einem Div-Hintergrund erstellen?

Diagonale Linien auf einem Div-Hintergrund mit reinem CSS zeichnen

Um die angeforderten diagonalen Linien ohne Bilder zum Div-Hintergrund hinzuzufügen, verwenden Sie die folgende CSS-Lösung:

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

Diese Lösung nutzt CSS3 Linear-Gradient mit calc(), um Linien zu verbinden und so eine automatische Skalierung auf die Dimensionen des Divs sicherzustellen. Durch die Verwendung eines Farbverlaufs können zwei diagonale Linien erstellt werden, ohne dass zusätzliche Hintergrundbilder erforderlich sind.

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