Comment positionner une courbe de découpe en haut d'un arrière-plan à l'aide de CSS ?

Comment positionner une courbe de découpe sur le dessus d'un arrière-plan

Le but est de modifier le code CSS fourni pour positionner la courbe de découpe ( .top) en haut de l'arrière-plan (.box), au lieu du côté droit.

Explication du code CSS :

Dans le code d'origine, le .top L'élément est positionné par rapport à son .box parent à l'aide de transform:translateY(-100%). Cela le place effectivement sous l'arrière-plan.

Pour déplacer la courbe vers le haut, nous devons :

1. Ajuster la marge supérieure du conteneur .box pour créer un espace au-dessus. .
2. Repositionnez l'élément .top à l'aide de pseudo-éléments pour créer la courbe en haut.

Code CSS révisé :

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

Comment ça marche :

• Le conteneur .box a désormais une marge supérieure de 90 px, offrant un espace au-dessus pour la courbe de découpe.
• Le L'élément .top est supprimé et deux pseudo-éléments sont créés sous le conteneur .box.
• Ces pseudo-éléments utilisent des dégradés pour créer la forme de la courbe.
• transform-origin:right et transform :scaleX(-1) sont utilisés sur le deuxième pseudo-élément pour retourner la courbe horizontalement.

En implémentant ces modifications, la courbe de découpe sera désormais positionnée au-dessus de l'arrière-plan comme vous le souhaitez.

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!