Clip div when outside of parent div

Question

I have a little project here that I am working on. I am not very far with it at the moment, but that is beside the point.

This is the CSS, since I am required to post code if I provide a link:

body{
  background: #FF4D4D;
  background: -webkit-radial-gradient(circle, #FF4747, #FF0000);
  background: -o-radial-gradient(circle, #FF4747, #FF0000);
  background: -moz-radial-gradient(circle, #FF4747, #FF0000);
  background: radial-gradient(circle, #FF4747, #FF0000);
}

#background {
  width: 400px;
  height: 400px;
  border: 15px solid #FFFFFF;
  border-radius: 50%;
  margin: 35px 0px 0px 700px;
  background: #FF0000;
  position: relative;
}

#mailicon {
  border: 5px solid black;
  border-radius: 25px;
  width: 200px;
  height: 150px;
  margin: 120px 0px 0px 95px;
  background: white;
  clip: circle(60px 725px 460px 1125px);
}

#flap1 {
  background: white;
  margin: 50px 0px 0px 0px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  height: 115px;
  width: 115px;
  border: thick solid black;
  margin: -65px 0px 0px 38px;
}

#flap2 {
  background: red;
  height: 90px;
  width: 172px;
  margin: -95px 0px 0px 14px;
  border-bottom: thick solid black;
}

.flap {
  position: absolute;
}

#opentext {
  /*To be done later*/
}

My problem is that I need to hide any part of the mail icon that is outside of the outside of the background div, which is shaped as a circle and the parent div.

I have browsed around and am thinking that my problem relates to clipping or masking, but I can't find a way to properly implement those.

I would rather not just put it behind other divs to turn in invisible because the parent is circular and it would take a lot of extra divs to hide the mail icon fully.

Any suggestions?

Answer 1

If I'm understanding you correctly, you're looking to hide parts of the mail icon behind the circle. If that's the case, you can either use clip() like you have, or use overflow: hidden on a parent div.