Fun Photo Corners without Photoshop

Oh gosh, snazzy photo corners for your pics without going near Photoshop.

Here’s the html:

< div class="pic">< span>< /span>< a href="#">< img class="alignleft" 
src="http://ourlocality.org/demo/files/2011/04/11.jpg" alt="" />< /a>< /div>

Here’s the css (Custom css is available with Plus!):

.pic {
float: left;
height: 130px;
margin: 30px;
position: relative;
width: 180px;
}

.pic span {
background: url(http://ourlocality.org/demo/files/2011/04/cut-corner.png) no-repeat;
display: block;
height: 137px;
left: -5px;
position: absolute;
top: 2px;
width: 189px;
}

.pic img {
background: white;
border: 1px solid #CCC;
padding: 4px;
}

[Picked up the wrong css earlier and wondered how on earth that would work, it would not!]