Crop triangle from image in CSS -

our designer wants that:

but can't figure out way triangle crop:

• with :after takes width , uses kind of borders trick make triangle
• with big :after element rotated , white, should not hide other text
• with magic filter don't know?
• by using canvas, cropping in js, loading image base64 url? (maybe overkill :d)

what think?

edit: version 2: http://jsfiddle.net/mtau8/4/ works changing bg.

here ya go: http://jsfiddle.net/mtau8/

html: (i used div background, use img element.)

<div class="container">     <div class="img"></div> </div> 

css: (mostly fluff setup, use transform:rotate() on :after content, position slices picture nicely. contain in container , you're go.)

.container {     width: 250px;     height: 100px;     position: relative;     overflow:hidden; } .img {     width: 250px;     height: 100px;     background-color: blue;     position: relative; } .img:after{     content:"";     position: absolute;     width: 400px;     height:125px;     background-color: white;     top:90px;     left:-20px;    transform: rotate(5deg);    -moz-transform: rotate(5deg);    -webkit-transform: rotate(5deg);  }