Crop triangle from image in CSS

Question

Our designer wants to do that:

But I can't figure out a good way to do this triangle crop:

• With an :after that takes all the width and uses some kind of borders trick to make a triangle
• With a big :after element that is rotated and white, but it should not hide any other text
• With some magic filter I don't know?
• By using a canvas, cropping it in JS, then loading the image as a base64 url? (Maybe overkill :D)

What do you think?

Answer 1

Edit: version 2: http://jsfiddle.net/mtaU8/4/ works with changing bg.

Here ya go: http://jsfiddle.net/mtaU8/

HTML: (I used a div with a background, but you could easily use an img element.)

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

CSS: (mostly fluff for setup, but basically use transform:rotate() on an :after content, then position it so it slices your picture nicely. Contain all that in your container and you're good to 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);

}

Answer 2

I'd suggest using the CSS clip property:

.crop {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

The clip property's rect value represents the section of the image that will be cropped. Here's a demo.