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.
See Question&Answers more detail:osI'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.
See Question&Answers more detail:osThe 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.
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.
: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.