Comment couper un cercle dans un rectangle en utilisant uniquement CSS ?

Découpez un cercle à partir d'une forme rectangulaire en CSS

Une approche pour créer cet effet consiste à utiliser une combinaison d'éléments et un astucieux utilisation du rayon de bordure. Cependant, cette technique souffre d'inconvénients potentiels, tels qu'un balisage irrégulier et un espace inesthétique dans certains navigateurs.

Approche alternative

Heureusement, il existe une méthode alternative qui emploie un seul élément avec un pseudo-élément. Cette approche exploite la puissance des arrière-plans à dégradé radial pour l'élément parent, tandis que le pseudo-élément sert de découpe de cercle transparent.

Considérez l'extrait de code suivant :

div:before {
  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

Explication

• L'élément div définit la forme rectangulaire, complétée par des arrondis coins.
• À l'intérieur du div, le pseudo élément :before crée la découpe circulaire en utilisant un positionnement absolu et une bordure rouge unie.
• L'effet d'espacement et de remplissage transparent est obtenu grâce à l'application d'un radial fond dégradé sur l’élément div. Le dégradé crée une zone transparente au centre, qui chevauche le cercle du pseudo-élément, ce qui entraîne un effet de découpe.

Cette technique offre de nombreux avantages :

• Il élimine le besoin d'éléments supplémentaires, simplifiant ainsi le balisage.
• Il fonctionne de manière cohérente sur tous les navigateurs, sans aucune différence notable. artefacts.
• Le cercle peut être centré avec précision dans le rectangle à l'aide de calculs simples.

En mettant en œuvre cette approche alternative, vous pouvez découper efficacement un cercle à partir d'une forme rectangulaire en CSS, obtenir le résultat visuel souhaité sans les complexités et les pièges des méthodes précédentes.

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!