Cut ONE Corner of div Using CSS

When we want to create the div with one edge is cut with the help of only CSS, following code does that.

HTML Code:

<div></div>

CSS Code:

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;
}

Above example shows the corner at top left of div.

We can have any corner cut by little tweaking above code.

Example:

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

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

Above code show the corner at bottom of the div.

Source: http://stackoverflow.com/questions/7324722/cut-corners-using-css