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.
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.