Comment puis-je créer des formes incurvées transparentes avec deux côtés arrondis en utilisant CSS ou SVG ?

Création de formes incurvées transparentes avec deux côtés arrondis à l'aide de CSS

Dans votre tentative de créer une forme incurvée intérieure transparente, vous avez rencontré des difficultés pour réaliser la transparence souhaitée. Cette question met en évidence la nécessité de comprendre les techniques de création de formes courbes transparentes en CSS.

Solution utilisant des dégradés radiaux

Une approche pour créer cette forme consiste à utiliser des dégradés radiaux CSS. En définissant deux dégradés radiaux et en les positionnant stratégiquement, vous pouvez créer l'effet d'une forme incurvée avec des côtés arrondis :

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

Dans ce code, deux pseudo-éléments :before et :after sont créés pour former les côtés arrondis de la forme. Les dégradés radiaux permettent une transition progressive entre les zones transparentes et non transparentes, créant l'illusion d'une forme incurvée.

Solution alternative utilisant SVG

Alternativement, vous pouvez utiliser SVG (Scalable Vector Graphics) pour définir la forme incurvée :

<svg width="200" height="100" viewbox="0 0 200 100">
  <defs>
    <mask></mask></defs></svg>

Dans ce code SVG, un chemin est défini pour créer le forme, et un masque est appliqué au rectangle pour révéler uniquement la partie souhaitée de la forme.

Conclusion

En tirant parti des dégradés radiaux CSS ou SVG, vous pouvez obtenez la forme incurvée intérieure transparente souhaitée avec deux côtés arrondis. Le choix entre ces approches dépend de votre méthode préférée et de la complexité de votre conception.

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!