Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds.
Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+
A transparent arrow is created on div.arrow via the skewX property applied to the pseudo-elements :before, and :after. As div.arrow is positioned absolutely over the target image, the resulting effect is an arrow that appears to be clipped from the image.