Maison > interface Web > tutoriel CSS > 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 en haut d'un arrière-plan à l'aide de CSS ?

Barbara Streisand
Libérer: 2024-11-02 14:01:30
original
617 Les gens l'ont consulté

How to Position a Cutout Curve at the Top of a Background Using 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;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal