Comment puis-je transformer un dessus découpé en un arrière-plan supérieur incurvé en utilisant CSS ?

Conversion d'un dessus découpé en un arrière-plan supérieur incurvé

Dans cette tâche basée sur le code, nous visons à transformer une découpe positionnée sur le côté droit d'un bloc en un forme incurvée posée gracieusement au sommet du bloc.

L'extrait de code actuel implique un .box contenant un élément .top. Alors que l’effet recherché est d’avoir la découpe en haut, le code la place à droite. Alors, plongeons-nous dans la version révisée :

<code class="css">.box {
  margin-top: 90px;
  width: 200px;
  height: 100px;
  background: white;
  position: relative;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px;
  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;
}

.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}

body {
  background: pink;
}</code>

Ajustements clés :

• Nous avons défini la marge supérieure sur .box pour qu'elle corresponde au moins la hauteur des pseudo-éléments, en s'assurant que la découpe ne chevauche pas le bloc.
• Les pseudo-éléments sont désormais positionnés en bas de .box en utilisant bottom: 100%.
• Le la hauteur des pseudo-éléments est fixée à 80px, que vous pouvez ajuster pour contrôler la hauteur de la courbe.
• Les dégradés d'arrière-plan ont été modifiés pour créer l'effet radial souhaité.

Voilà! Vous disposez maintenant d’une découpe incurvée qui coule de manière transparente depuis le haut du bloc. N'hésitez pas à expérimenter davantage et à créer une courbe qui complète parfaitement 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!