Comment puis-je créer des divisions transparentes incurvées à l'aide de CSS ?

Création de divs transparents incurvés avec CSS

Dans votre quête pour concevoir un div transparent avec une forme incurvée, vous avez rencontré des difficultés pour obtenir l'objectif souhaité. effet. Voyons comment surmonter ce défi et créer la forme incurvée que vous recherchez.

Pour créer la forme incurvée, CSS propose la propriété clip-path, qui vous permet de définir la forme d'un élément à l'aide de diverses fonctions géométriques. Vous pouvez l'appliquer soit à l'élément supérieur, soit à l'élément inférieur, créant ainsi un effet de superposition.

L'extrait de code suivant montre comment obtenir la forme souhaitée à l'aide du chemin de détourage :

.first, .second {
  display: inline-block;
  margin: 5px;
}

/* For the first div */
.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

/* For the second div */
.second .top {
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.second .bottom {
  clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

Ce code crée deux divs, l'un avec un haut circulaire et un bas jaune, et l'autre avec un haut polygonal personnalisé et un bas jaune. En ajustant les valeurs du chemin de détourage, vous pouvez créer différentes formes courbes comme vous le souhaitez.

En utilisant le chemin de détourage, vous avez le pouvoir de concevoir des formes courbes captivantes et d'améliorer l'attrait esthétique de votre site Web ou de votre application Web.

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!