Question

我正在制作一个小项目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来完全隐藏邮件图标。

有什么建议吗？

Answer 1

如果我正确理解您，您希望隐藏圈子后面的邮件图标部分。如果是这种情况，您可以像使用clip()一样使用，也可以在父overflow: hidden上使用div。

在父div之外剪辑div

1 个答案: