Comment puis-je créer une découpe circulaire dans un rectangle en utilisant uniquement CSS ?

Création d'une découpe circulaire à partir d'une forme rectangulaire à l'aide de CSS

La question posée cherche une approche alternative pour obtenir une découpe circulaire dans une forme rectangulaire . La solution initiale utilisait une combinaison d'éléments et de bordures, ce qui aboutissait à un effet satisfaisant mais manquait de balisage propre et rencontrait un bug dans certains navigateurs.

Méthode alternative

Une plus Une solution élégante consiste à utiliser un seul élément (avec un pseudo-élément) et à utiliser des arrière-plans à dégradé radial. Voici le CSS révisé :

div:before {
  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;
  
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

Explication

• Le pseudo-élément (:before) crée une découpe rouge circulaire de dimensions 90px et le positionne à l'intérieur de l'élément parent.
• L'élément parent a un dégradé radial transparent qui remplit la zone restante, créant la forme rectangulaire avec le découpe.
• Le rayon du dégradé transparent est légèrement plus grand que le rayon de la découpe, permettant un mince espace transparent sur les bords.
• Le centrage du cercle et l'espace transparent est contrôlé par le placement du point central du dégradé radial.

Cette méthode mise à jour répond à la fois aux problèmes de balisage propre et au bug du navigateur rencontré dans la solution initiale. Il fournit une découpe circulaire transparente et visuellement agréable à partir d'une forme rectangulaire en utilisant uniquement CSS.

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!