Cut Corners using CSS

Question

I\'m looking to \"cut\" the top left corner of a div, like if you had folded the corner of a page down.

I\'d like to do it in pure CSS, are there any methods?

Answer 1

With a small edit to Joseph's code, the element does not require a solid background:

div {
    height: 300px;
    background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid rgba(0,0,0,0);
    width: 0;
}

http://jsfiddle.net/2bZAW/1921/

This use of 'rgba(0,0,0,0)' allows the inner 'corner' to be invisible .

You can also edit the 4th parameter 'a', where 0 < a < 1, to have a shadow for more of a 'folded-corner' effect:

http://jsfiddle.net/2bZAW/1922/ (with shadow)

---

NOTE: RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.