Html 在父div之外时剪裁div

我正在做一个小项目。我目前还不太清楚，但这与问题无关

这是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（）

，或者在父

div

上使用

overflow:hidden

，如果我理解正确，您希望将部分邮件图标隐藏在圆圈后面。如果是这种情况，您可以像以前一样使用

clip（）

，或者在父

div

上使用

overflow:hidden