How can we "chisel" a div?

Question

I'm trying to have a semi transparent colored div overlaid on a background image, with a shaped "hole" (like hexagon) in the middle of the div, so that we can see the background image clearly through that "hole". Can someone suggest me the most elegant way to achieve it with CSS3? I can make a hexagon with CSS3 but I don't know how to make it "chisel" through another div with its shape.

check [this question/answer](http://stackoverflow.com/questions/4344906/creating-a-hole-in-a-div-element) out — sharshi, Apr 04 '14 at 15:00
@sharshi thank you but I didn't find a suitable answer for me there. The "hole" that I'm trying to get has complex and dynamic shape so I can neither use border to fill the rest of space nor use gif/png image. — KwiZ, Apr 04 '14 at 15:18

score 2 · Accepted Answer · answered Apr 04 '14 at 16:13

One posibility using CSS is to set multiple backgrounds on a pseudo element

For instance

.test {
    left: 0px;
    top: 0px;
    width: 400px;
    height: 300px;
    position: relative;
    border: solid 1px black;
    background-image: url(http://placekitten.com/500/400);
    background-size: cover;
}


.test:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(-60deg,transparent 60px, rgba(200,290,0,0.5) 51px), 
                      linear-gradient(60deg,transparent 60px, rgba(200,290,0,0.5) 51px),
                      linear-gradient(120deg,transparent 60px, rgba(200,290,0,0.5) 51px),
                      linear-gradient(-120deg,transparent 60px, rgba(200,290,0,0.5) 51px),
                      linear-gradient(0deg,transparent 120px, rgba(200,290,0,0.5) 51px),
                      linear-gradient(180deg,transparent 120px, rgba(200,290,0,0.5) 51px);
    background-size: 33% 50%, 33% 50%, 33% 50%, 33% 50%, 34% 50%, 34% 50%;
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 0%, 50% 100%;
    background-repeat: no-repeat;
}

This creates an hexagon, with a yellow semitransparent frame

fiddle

though my need is a lot more complex than this but your solution is very neat and I will try to adjust it to fit my need. Thanks a lot! — KwiZ, Apr 04 '14 at 17:16

score 0 · Answer 2 · answered Apr 04 '14 at 16:06

0

I would use images to make it easier. here is an exmaple:

http://jsfiddle.net/WREV3/17/

and some code

answered Apr 04 '14 at 16:06

Alvaro Menéndez

8,766
3
37
57

How can we "chisel" a div?

2 Answers2