Jouer à cache-cache avec des formes

Bonjour à tous !

je viens pour vous demander de l'aide : est-il possible de rendre invisible ce qu'il y a en dehors du rectangle gris ?
Vous avez 4h.
(Je ne sais pas comment couper mes cercles, du coup de voudrais faire des sortes de marges qui rendent invisible ce qui est en dessous. Attention ! Je compte mettre les cercles sur un rectangle coloré, et il faudrait que l'invisibilité n'agisse pas dessus )

Merci à ceux qui se pencheront sur le problème

Code:

<style type="text/css">

.circles{
   position:relative;
   height:120px;
   width: 120px;
   border-radius: 50%;
   background-size: 600px 600px;
}
#violet{
   top:65px;
   left:40px;
   background-color:rgba(235,237,254,0.8);
}
#bleu{
   top:-100px;
   left:95px;
   background-color:rgba(200, 240,248,0.4);
}
#entete{
   position: absolute;
   width: 350px;
   height: 110px;
   top: 20px;
   border: 2px solid grey;
   padding: 20px;

}
</style>

<div id="entete"></div>
<div class="circles" id="violet"></div>
<div class="circles" id="bleu"></div>

</div>

Un jeu !

Si je comprends bien tu ne veux pas qu'il y ait des éléments qui dépassent de ton cadre ? Si c'est bien ça il faut mettre overflow:hidden; sur le rectangle. Cette propriété permet de caché tout le contenu qui dépasse du cadre.

Par contre, pour que ça marche il faut que le rectangle entoure tes deux cercles.
Au niveau html ça donnerais plutôt :

Code:

<div id="entete">
<div class="circles" id="violet"></div>
<div class="circles" id="bleu"></div>
</div>

La seule chose c'est que ça décale les cercles je crois... Donc il faut les replacer si tu veux qu'il y ait le même rendu.

Voilà j'espère avoir répondue à ta demande :3
Si tu as des questions n'hésite pas Nin !

C'est parfais ! Merci pour l'aide !