html - Making part of a div transparent

Question

I'm trying to do something like this in HTML. It's a header, at the very top of the page. The checkerboard area must be transparent.

I can't think of a good way to do this without using like 15 divs.

Answer 1

Future Options

The ideal scenario would be to use a single element with no images.

Masking and/or clipping would be helpful in situations like this, though browser support is limited. It does seem that progress has been made on the spec (below) since I first wrote this answer, so that's encouraging.

• http://www.w3.org/TR/css-masking/
• http://www.html5rocks.com/en/tutorials/masking/adobe/

Practical Approach

For now, I would go with an image-based solution. It doesn't need to be complex.

I recommend avoiding raster graphics since high-density displays are becoming more and more common (nearly every tablet/smartphone and 4K PC monitors). To accomplish this, SVG will work in most modern browsers and PNG can be used as a fallback.

Demos

• Here's a demo using a PNG: http://jsfiddle.net/MxspA/6/.
• Same demo with IE7 support: http://jsfiddle.net/MxspA/9/ (replaces :before and :after with extra elements).

Source for IE8+ Version

<div id="box">
    <div id="knockout"></div>
</div>

#box{ 
    position: relative; 
}

#knockout {
    background-image: url(http://i.stack.imgur.com/AXHM0.png);
    width: 105px;
    height: 180px;
    margin: 0 auto;    
}

#knockout:before{
    content: " ";
    position: absolute;
    left: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

#knockout:after{
    content: " ";
    position: absolute;
    right: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

Images

Here's a transparent PNG to get you started. Someone with basic Adobe Illustrator skills could recreate this as an SVG image, providing the aforementioned high resolution capabilities. An SVG will work nicely as a background image.