Comment puis-je créer une forme « cercle inversé » en utilisant uniquement CSS ?-tutoriel CSS-php.cn

Comment puis-je créer une forme « cercle inversé » en utilisant uniquement CSS ?

DDD

Libérer： 2024-12-10 14:33:10

original

444 Les gens l'ont consulté

How Can I Create an

Création d'une forme "Cercle inversé" avec CSS

Le concept de "cercle inverse" fait référence à une forme qui combine un cercle plein avec sa découpe inversée pour créer un effet unique. Bien que réaliser cette forme avec CSS puisse sembler difficile, c'est possible sans utiliser d'images.

Solution de dégradé d'arrière-plan

Une approche consiste à utiliser des dégradés d'arrière-plan radiaux CSS3. Cette solution vous permet de créer un espace entre le cercle et sa découpe, ce qui entraîne un effet plus complexe.

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;
  /* Adjust margin/padding for desired "gap" */
  padding-left: 30px;
  margin-left: -30px;
  /* Real borders */
  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;
  /* Inverse circle "cut" */
  background-image: -moz-radial-gradient(
    -23px 50%,
    circle closest-corner,
    transparent 0,
    transparent 55px,
    black 56px,
    grey 57px
  );
  background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

Copier après la connexion

Z- Solution d'indexation

Une autre approche se concentre sur l'utilisation de l'indexation z pour créer l'effet de cercle inverse. Cela nécessite de positionner soigneusement les éléments pour obtenir le résultat souhaité.

HTML :

<div>

Copier après la connexion

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

Copier après la connexion

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!