css - Smart way to add corner image to DIV border on all four corners

Question

My designer has designed a border with a diamond shape on the border corners. See image below.

The way I'd go about achieving this would be to save the diamond shape as an image, create a 1px solid border and then place the diamond shape absolutely positioned on the four corners. While this works I'm sure there is a much smarter way to do this without the additional mark up.

Maybe using something like :after in css? How would I do this, or is there a better way? I need to have this compatible with IE8+ but if it works with IE7+ even better.

Answer 1

For a solution that's widely compatible, I think you should use four elements with position: absolute combined with position: relative and negative offsets:

See: http://jsfiddle.net/M4TC5/

@meo's demo using transform: http://jsfiddle.net/M4TC5/2/
(and my demo: http://jsfiddle.net/M4TC5/1/)

That really just shows the concept, you can generate better transform code (that doesn't look slightly "off" in IE) with this tool: http://www.useragentman.com/IETransformsTranslator/

HTML:

<div class="image">
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
    <img src="???" />
</div>

CSS:

.image {
    position: relative
}
.corner {
    position: absolute;
    background: url(???);
}
.TL {
    top: -10px;
    left: -10px
}
.TR {
    top: -10px;
    right: -10px
}
.BL {
    bottom: -10px;
    left: -10px
}
.BR {
    bottom: -10px;
    right: -10px
}