Comment créer un haut incurvé pour un arrière-plan à l'aide de CSS ?

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

Dans la conception fournie, la découpe est destinée à apparaître au-dessus de l'arrière-plan au lieu de c'est vrai. Voici comment modifier le code CSS pour y parvenir :

<code class="css">/* Make the box taller to accommodate the curve */
.box {
  margin-top: 90px;
}

/* Create the top and bottom pseudo elements */
.box:before,
.box:after {
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px; /* Adjust this to control the curve's height*/
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%, #0000) top,
    radial-gradient(50% 100% at top right, #0000 98%, #fff) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

/* Flip the after pseudo element */
.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}</code>

Dans ce code mis à jour :

• La marge supérieure de la boîte est augmentée pour garantir qu'elle est plus haute que la courbe.
• Les pseudo éléments sont tous deux positionnés en bas de la boîte (bas : 100%).
• La hauteur des pseudo éléments est ajustée pour contrôler la hauteur de la courbe.
• La propriété transform est utilisée pour inverser le côté droit de la courbe.

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!