Comment créer un arrière-plan de ligne diagonale sur un DIV en utilisant CSS ?

Ajout de lignes diagonales à un arrière-plan DIV avec CSS

Question :

Comment pouvez-vous ajouter des lignes diagonales à l'arrière-plan d'un élément DIV en utilisant uniquement CSS ?

Remarque : L'effet souhaité est comme indiqué dans l'image fournie.

Solution :

Pour ajuster automatiquement les dimensions de l'élément, utilisez le dégradé linéaire CSS3 et la fonction calc(), comme illustré ci-dessous :

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

Remarque : Un exemple HTML serait :

<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!