Comment puis-je créer des formes incurvées transparentes avec des côtés arrondis à l'aide de CSS ?

Création de formes courbes transparentes avec des côtés arrondis en CSS

La création de formes courbes en CSS peut être un défi, surtout lorsque l'on vise la transparence. Cet article explore une méthode pour y parvenir en utilisant CSS, en abordant le problème des arrière-plans non transparents.

Le défi :

Vous pouvez rencontrer un scénario dans lequel vous souhaitez créez une forme incurvée transparente similaire à celle représentée dans l'image fournie. Cependant, votre approche actuelle utilisant des techniques CSS traditionnelles aboutit à un arrière-plan opaque, comme le montre la capture d'écran du résultat.

La solution :

Pour résoudre ce problème, nous présentons une solution impliquant un gradient radial. En utilisant deux dégradés radiaux positionnés stratégiquement, nous pouvons créer l'illusion d'une forme incurvée transparente avec des côtés arrondis.

Mise en œuvre :

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}

.box .top {
  height:100px;
  width:150px;
  transform:translateY(-100%);
  position:relative;
  background:#fff;
}

.top:before,
.top:after{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
}

.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}

body {
  background:pink;
}

Dans cet extrait de code , l'élément '.top' représente la forme incurvée. Les dégradés radiaux positionnés avant et après cet élément créent les côtés arrondis et la transparence. La propriété 'transform: scaleY(-1)' retourne le pseudo-élément suivant verticalement, créant ainsi la forme symétrique.

Implémentation améliorée :

Pour une utilisation plus utilisateur- manière conviviale d'ajuster la courbe, pensez à utiliser la solution fournie par https://css-shape.com/inner-curve/. Ce site Web vous permet de personnaliser divers aspects de la forme de la courbe, facilitant ainsi l'obtention de l'effet souhaité.

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!