2015-12-13 2 views
0

У меня есть небольшой проект 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.

Любые предложения?

ответ

0

Если я правильно понимаю вас, вы хотите скрыть части значка почты за кругом. Если это так, вы можете использовать clip(), как и у вас, или использовать overflow: hidden на родительском div.

Смежные вопросы