How to mask semi circles inside a rectangle and mask through css? - html

Question

I have a background image and a rectangle made in css above it. What i need is, two semi circles should mask through this rectangle and background image should be seen through this rectangle as shown in the image.

Answer 1

You can do it like this
HTML:
<div id="wrapper">
<div id="rect"></div>
<div id="a">
</div>
<div id="b">
</div>
</div>
CSS:
#wrapper{
position:relative;
width:312px;
height:313px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;
}
#a{
position:absolute;
right:0;
height:120px;
top:100px;
border-top-left-radius:60px;
border-bottom-left-radius:60px;
width:60px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;}
#b{
position:absolute;
left:0;
height:120px;
top:100px;
border-top-right-radius:60px;
border-bottom-right-radius:60px;
width:60px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;
}
#rect{
width:100%;
height:56%;
position:absolute;
top:65px;
background:rgba(120,0,23,.8);
}
FIDDLE
Output:
Change the color and image as you want.!!!!
Also check this : https://stackoverflow.com/a/17751125/1542290

Answer 2

You can do this by controlling the opacity of the rectangle.
Something like this : (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)

Answer 3

The following is the css code
.bckgrnd{
background:url('image.jpg');
width:1000px;
height:500px;
}
.rect{
position:relative;
width:700px;
height:200px;
background:pink;
opacity:0.5;
top:100px;
left:150px;
}
.semi{
height:100px;
width:50px;
background:url(image.jpg);
background-attachment:fixed;
position:absolute;
top:40px;
}
.right{
left:0;
border-radius :0 50px 50px 0;
}
.left{
right:0;
border-radius :50px 0 0 50px;
}
and the html mark up as follows
<div class="bckgrnd">
<div class="rect">
<div class="semi right"></div>
<div class="semi left"></div>
</div>
</div>