Création d'une courbe au-dessus d'un arrière-plan

Dans le domaine du développement Web, les concepteurs rencontrent souvent le besoin de créer des courbes à des fins esthétiques . L'un de ces scénarios consiste à positionner une courbe découpée au-dessus d'un arrière-plan plutôt qu'à droite.

Pour y parvenir, il est nécessaire de modifier le code CSS existant pour ajuster le positionnement et la forme de la courbe. Voici comment procéder :

1. Ajuster la position des pseudo-éléments :

   • Modifier la position des pseudo-éléments (.box : avant et .box:après) vers le bas:100%. Cela les déplacera vers le bas de l'élément parent .box.

2. Modifier les dimensions du pseudo-élément :

   • Définissez la hauteur des pseudo-éléments sur une valeur spécifique (par exemple, 80 px) pour contrôler la hauteur de la courbe.
   • Ajustez la largeur des pseudo-éléments à 50 % pour qu'ils couvrent la moitié de la largeur de la .box. .

3. Modification de l'arrière-plan dégradé :

   • Modifier les arrière-plans dégradés radiaux de .box:before et .box:after pour créer la forme incurvée souhaitée. La technique consiste à créer deux dégradés de couleurs différentes et à les positionner aux angles de courbe souhaités.

4. Pseudo-élément de transformation et mis à l'échelle :

   • Appliquez transform:scaleX(-1) à .box:after pour le retourner horizontalement. Cela créera l'effet miroir de la courbe.

En suivant ces étapes, vous pouvez réussir à créer une courbe au-dessus d'un arrière-plan et obtenir l'effet de découpe souhaité.