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

Découper un trou circulaire dans une forme rectangulaire avec CSS

Dans la recherche d'un effet visuel spécifique, de nombreux développeurs rencontrent des problèmes de balisage et de compatibilité, en particulier lorsqu'ils tentent pour créer une découpe circulaire dans une forme rectangulaire à l'aide de CSS.

Pour répondre à ces préoccupations et améliorer la compréhension des techniques CSS, explorons une approche alternative pour obtenir l'objectif souhaité. résultat. En utilisant un arrière-plan à dégradé radial sur l'élément parent et un pseudo-élément pour la découpe circulaire, nous pouvons simplifier le balisage et éliminer le problème d'écart de 1 px dans IE 10/11.

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

Le pseudo- L'élément, représenté par :before, définit la découpe circulaire rouge. Il est positionné de manière absolue et centré horizontalement dans le div parent, reflétant le trou circulaire que nous visons à réaliser. Les propriétés background-color et border-radius définissent son apparence visuelle.

Le div parent est positionné relativement pour contenir la découpe et fournit l'arrière-plan rectangulaire. Le rayon de bordure arrondit ses coins, créant une transition douce entre la découpe et le rectangle.

L'arrière-plan à dégradé radial sur le div parent est crucial pour obtenir l'espace transparent et l'effet de remplissage. Le dégradé radial part du point central du cercle (50px 50px à 50% -30px) et s'étend vers l'extérieur, créant une transition douce du noir transparent au noir semi-transparent. En ajustant soigneusement le rayon du dégradé, nous créons l'illusion d'un trou circulaire découpé dans le rectangle.

Cette approche offre un balisage plus simple par rapport à l'utilisation de plusieurs éléments et élimine le problème d'écart de 1 px rencontré dans IE 10/ 11. Il s'appuie uniquement sur les propriétés CSS pour obtenir l'effet visuel souhaité, améliorant ainsi la maintenabilité et la compatibilité entre 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!