Comment puis-je créer un effet « cercle inversé » ou « cercle découpé » en utilisant CSS3 ?

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

Créer des formes qui ressemblent à un "cercle inversé" ou à un " découper un cercle" en CSS est un défi de conception courant. Voici comment obtenir cet effet à l'aide des techniques CSS 3 :

Mise à jour : option de dégradé d'arrière-plan radial CSS3

Pour les navigateurs prenant en charge les dégradés d'arrière-plan radiaux CSS3 (par exemple, Firefox , Chrome), un "espace" transparent peut être créé entre le cercle et son inverse découpe :

HTML :

<div>

CSS :

.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: -moz-radial-gradient(
    -23px 50%,
    circle closest-corner,
    transparent 0,
    transparent 55px,
    black 56px,
    grey 57px
  );
}

Réponse originale :

En utilisant l'indexation z et le positionnement, un effet de « cercle inverse » propre peut être obtenu :

HTML :

<div>

CSS :

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

Les deux méthodes aboutissent à un " effet "cercle inversé" sans avoir besoin d'images.

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!