Comment puis-je créer des lignes diagonales sur un arrière-plan Div en utilisant uniquement CSS ?

Dessiner des lignes diagonales sur un arrière-plan Div avec du CSS pur

Pour ajouter les lignes diagonales demandées à l'arrière-plan div sans utiliser d'images, utilisez la solution CSS suivante :

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

Cette solution utilise le dégradé linéaire CSS3 avec calc() pour connecter les lignes, garantissant une mise à l'échelle automatique aux dimensions du div. L'utilisation d'un dégradé permet de créer deux lignes diagonales sans avoir besoin d'images d'arrière-plan supplémentaires.

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!