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.

Code CSS Explication :

Dans le code d'origine, l'élément .top 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 au 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 Le conteneur .box a désormais une marge supérieure de 90 px, offrant ainsi un espace au-dessus pour la découpe. courbe.
• 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 inverser la courbe horizontalement.

En mettant en œuvre 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!