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


Comments

Popular posts from this blog

CSS Equal Height Columns, Three Different Ways

The Simplest Way To Center Elements Vertically And Horizontally

Gradient Border Colors with CSS