Comment puis-je découper efficacement un cercle dans un rectangle à l'aide de CSS ?

Utiliser CSS pour découper un cercle dans une forme rectangulaire

Le défi de créer un cercle transparent découpé dans une forme rectangulaire a suscité discussion en ligne. Bien que certaines solutions existent, il existe des limitations et des bugs qui ont poussé les utilisateurs à rechercher des alternatives.

Approche alternative utilisant le dégradé radial

Une approche alternative à la solution initiale réside dans en utilisant un dégradé radial sur l'élément parent. Ce dégradé crée la forme circulaire, tandis qu'un pseudo-élément est utilisé pour définir le cercle réel. Ce balisage simplifié élimine le besoin de plusieurs divs et corrige le bug associé à IE 10/11.

div:before {  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;  /* top = -75px, radius = 45px, so circle's center point is at -30px */
  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);  /* use same center point as with concentric circles but larger radius */
}

En utilisant cette approche de dégradé radial, vous pouvez découper efficacement un cercle à partir d'une forme rectangulaire, évitant ainsi le limitations des solutions précédentes et assurer la compatibilité entre les différents navigateurs.

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!