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

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.

enter image description here

Something like [this](http://stackoverflow.com/a/17751125/1542290)? — Mr. Alien, Jan 07 '14 at 07:51
Also, close voting your question as you haven't tried, nor you shared your code — Mr. Alien, Jan 07 '14 at 07:51

score 1 · Accepted Answer · edited May 23 '17 at 12:24

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(https://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(https://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(https://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:

enter image description here

Change the color and image as you want.!!!!

Also check this : https://stackoverflow.com/a/17751125/1542290

i need a transparent rectangle and semicircles are masked through them. Background is seen clearly through these circles. — madhu kumar, Jan 08 '14 at 07:34

score 0 · Answer 2 · answered Jan 07 '14 at 07:59

0

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

answered Jan 07 '14 at 07:59

Akash

1
2

score 0 · Answer 3 · answered Jan 07 '14 at 11:28

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>

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

3 Answers3

Linked