Comment créer une forme de cercle inversé ou découpé à l'aide de CSS ?

Forme CSS 3 : "Cercle inversé" ou "Cercle découpé"

En CSS, un cercle inversé ou cercle découpé est une forme qui ressemble à un cercle avec un section découpée. Cela peut être réalisé à l'aide de diverses techniques, mais deux méthodes courantes incluent :

Utilisation d'éléments imbriqués et du positionnement absolu

Cette méthode consiste à créer deux éléments imbriqués, un cercle intérieur (#a) pour former le partie circulaire solide et une forme extérieure (#b) qui contient un indice z négatif pour la positionner derrière le cercle intérieur. La forme extérieure a une section de découpe incurvée obtenue grâce à des bordures CSS et des ajustements de marges/remplissage négatifs.

Exemple de code :

<div>

.inversePair {
  border: 1px solid black;
  background: grey;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
}

#a:before {
  content: ' ';
  left: -6px;
  top: -6px;
  position: absolute;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 56px;
  background-color: white;
}

#b {
  width: 200px;
  z-index: -2;
  padding-left: 50px;
  margin-left: -55px;
  overflow: hidden;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#b:before {
  content: ' ';
  left: -58px;
  top: -7px;
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 57px;
  background-color: black;
}

Utilisation du dégradé d'arrière-plan radial et du positionnement absolu

Une autre méthode consiste à créer un cercle en utilisant un dégradé d'arrière-plan radial CSS3 et à placer un div en position absolue avec marge négative pour créer l'effet de découpe. Cette option convient aux navigateurs prenant en charge le dégradé radial CSS.

Exemple de code :

<div>

.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
  z-index: 1;
}

#b {
  width: 200px;
  padding-left: 30px;
  margin-left: -30px;
  border-left: none;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: /* radial-gradient syntax for various browsers */;
}

Ces techniques offrent des options flexibles pour créer des cercles inversés ou découpés en CSS sans recourir aux images. Le choix approprié dépend de la compatibilité du navigateur, des exigences de conception et 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!