Box Treatment - Corner Diamonds

by bizamajig

HTML

<div class="image">
    <img src="http://xeobits.com/wp-content/uploads/2011/04/middle_programmer-funny.jpg" alt="html for food" />
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
</div>

CSS

body {
    padding: 30px
}
.image {
    padding: 10px;
    border: 1px solid grey;
    position: relative;
    float: left;
}
.corner {
    background: #fff;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid grey;
    
    
     -moz-transform: rotate(45deg);  /* FF3.5+ */
       -o-transform: rotate(45deg);  /* Opera 10.5 */ 
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */ 
      -ms-transform: rotate(45deg);  /* IE9 */
          transform: rotate(45deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9  */
                     M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand');
               zoom: 1;

}
.TL {
    top: -11px;
    left: -11px
}
.TR {
    top: -11px;
    right: -11px
}
.BL {
    bottom: -11px;
    left: -11px
}
.BR {
    bottom: -11px;
    right: -11px
}