Maison > interface Web > tutoriel CSS > Comment créer une forme incurvée transparente avec des côtés arrondis à l'aide du dégradé radial CSS ?

Comment créer une forme incurvée transparente avec des côtés arrondis à l'aide du dégradé radial CSS ?

Patricia Arquette
Libérer: 2024-12-10 16:45:14
original
451 Les gens l'ont consulté

How to Create a Transparent Curved Shape with Rounded Sides Using CSS Radial-gradient?

Forme incurvée transparente CSS avec deux côtés arrondis

Créer une forme incurvée et transparente peut être un défi, surtout lorsque vous souhaitez avoir une forme arrondie côtés. Dans cet article, nous explorerons une solution utilisant le dégradé radial.

Tentative initiale

Au départ, vous avez tenté de créer une forme incurvée en utilisant une combinaison de positionnement absolu et un rayon de bordure incurvé. Cependant, l'arrière-plan est resté opaque, empêchant la couleur bleue d'arrière-plan de transparaître.

Solution utilisant un dégradé radial

Une meilleure solution consiste à utiliser un dégradé radial pour créer l'illusion d'une forme transparente et incurvée. Radial-gradient permet de définir un dégradé qui part d'un point précis et rayonne vers l'extérieur.

Le CSS :

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

.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);
}
Copier après la connexion

Explication

L'élément .box sert de conteneur pour la forme incurvée. À l'intérieur de celui-ci, l'élément .top est positionné de manière absolue et translaté vers le haut (-100 %) pour créer la forme.

L'élément .top comporte deux pseudo-éléments (::before et ::after) qui créent l'élément .top. effet incurvé utilisant un dégradé radial. Ces pseudo-éléments sont positionnés dans les coins supérieur gauche et inférieur droit de l'élément .top, avec une largeur de 50 px.

Les dégradés radiaux sont définis pour commencer en haut à gauche et en bas. coins droits, respectivement. Le premier dégradé crée une section blanche (opaque) sur la droite, qui devient transparente 2 % au-dessus du bord inférieur. Le deuxième dégradé fait le contraire, créant une section transparente à gauche et une section blanche en bas.

En combinant ces dégradés, l'illusion d'une forme transparente et incurvée est créée.

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!

source:php.cn
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