Search code examples
htmlcsscss-shapes

Cut Corners using CSS

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?

Solution

  • If the parent element has a solid color background, you can use pseudo-elements to create the effect:

    div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}
    <div></div>

    http://jsfiddle.net/2bZAW/

    P.S. The upcoming border-corner-shape is exactly what you're looking for. Too bad it might get cut out of the spec, and never make it into any browsers in the wild :(