У меня есть небольшой проект here, над которым я работаю. На данный момент я не очень далек, но это не относится к делу.Clip 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.
Я обошел вокруг и думаю, что моя проблема связана с отсечением или маскировкой, но я не могу найти способ правильно их реализовать.
Я бы предпочел не просто поместить его за другие divs, чтобы он стал невидимым, потому что родительский круглый, и для полного скрытия пиктограммы почты потребуется много дополнительных div.
Любые предложения?