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

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

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!