Comment puis-je créer des lignes diagonales dans un arrière-plan DIV à l'aide de CSS ?

Création de lignes diagonales dans un arrière-plan DIV à l'aide de CSS

Énoncé du problème

Considérez le code HTML et CSS suivant :

<div class="preview-content">
  PREVIEW
</div>

.preview-content {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  line-height: 300px;
  text-align: center;
  vertical-align: middle;
  font-size: 2em;
}

L'objectif est d'ajouter des lignes diagonales à l'arrière-plan du div de contenu d'aperçu, comme le montre ce qui suit image :

[Image d'un DIV avec des lignes diagonales]

Solution

Une solution évolutive qui s'ajuste dynamiquement aux dimensions de l'élément peut être obtenue en utilisant les dégradés linéaires CSS3 et le Fonction calc().

.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 class="crossed"></textarea>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!