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

Création de lignes diagonales en arrière-plan Div avec CSS

Souvent, vous rencontrez des situations dans lesquelles vous souhaitez embellir l'apparence d'un div en ajoutant des lignes diagonales sur son arrière-plan. Cela peut ajouter une touche créative à votre design, améliorant ainsi son attrait visuel. Il est intéressant de noter qu’obtenir cet effet est tout à fait réalisable avec les bonnes techniques CSS. Cet article fournit un guide complet sur la façon d'aborder cette tâche efficacement.

Dans votre requête, vous avez décrit la nécessité de créer des lignes diagonales similaires à celles représentées dans l'image fournie. Bien que la préservation de l'image d'arrière-plan soit cruciale, l'ajout de lignes diagonales qui complètent le design existant peut améliorer l'esthétique globale.

Utiliser les dégradés linéaires et Calc()

Pour résoudre ce problème défi, les dégradés linéaires CSS3 combinés à calc() offrent une solution élégante. Les dégradés linéaires vous permettent de créer des transitions de couleurs douces dans une direction spécifiée. Dans ce cas, nous utiliserons deux dégradés linéaires pour former les lignes diagonales.

La fonction calc() nous permet de calculer dynamiquement les valeurs, garantissant que les lignes évoluent et s'ajustent pour s'adapter aux dimensions de notre div. L'extrait CSS suivant illustre comment cela peut être réalisé :

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

Ce code CSS crée deux dégradés linéaires, l'un incliné vers le haut à gauche et l'autre vers le haut à droite. La fonction calc() garantit que le centre de la ligne est aligné avec le milieu du div, avec un léger décalage de 0,8px pour créer l'effet diagonal.

En appliquant la classe 'croisée' au div , comme le montre le code HTML suivant, les lignes diagonales apparaîtront en arrière-plan du div :

<textarea class="crossed"></textarea>

N'oubliez pas d'ajuster les valeurs de couleur dans les dégradés linéaires pour qu'elles correspondent à votre couleur de ligne souhaitée. Avec cette solution, vous pouvez facilement ajouter des lignes diagonales à n'importe quel arrière-plan div, ajoutant ainsi une touche unique et visuellement attrayante à votre design.

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!