在父 div 外部时剪辑 div

我有一个小项目here我正在努力。目前我对此还不太了解，但这不是重点。

这是 CSS，因为如果我提供链接，我需要发布代码：

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*/
}

我的问题是，我需要隐藏背景 div 外部的邮件图标的任何部分，背景 div 的形状为圆形和父 div。

我浏览了一下，认为我的问题与剪切或屏蔽有关，但我找不到正确实现这些的方法。

我宁愿不只是将它放在其他 div 后面以使其不可见，因为父级是圆形的，并且需要大量额外的 div 才能完全隐藏邮件图标。

有什么建议么？

如果我理解正确的话，您正在寻找将邮件图标的部分隐藏在圆圈后面。如果是这种情况，您可以使用clip()像你一样，或者使用overflow: hidden在父母身上div.