Comment créer des lignes diagonales dans un arrière-plan DIV en utilisant uniquement CSS ?

Créer des lignes diagonales en arrière-plan DIV avec CSS

Problème :

Améliorer un DIV avec une zone d'aperçu pour afficher les lignes diagonales en arrière-plan, comme le montre l'image ci-jointe. La requête spécifie l'utilisation de CSS uniquement si cela est possible.

Solution utilisant CSS3 Linear-Gradient :

Pour redimensionner automatiquement les lignes aux dimensions de l'élément, utilisez une combinaison de dégradés linéaires CSS3 avec calc(). Cette solution est compatible avec différentes versions de Chrome :

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

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!