Slanted Corner on CSS box

Solution 1:

Descriptions

Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) supports old browsers. For CSS3-specific, try CSS polygons: http://alastairc.ac/2007/02/dissecting-css-polygons/.

Code

The HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

The CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

The result: http://jsfiddle.net/mdQzH/

Alternative Code

To use transparent borders and text in the border section... The HTML:

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>

The CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

The result: http://jsfiddle.net/76EUw/2

Solution 2:

This can be done using svg clip-path.

Advantages:

1. Work with a regular div
2. No hacky borders to create shapes
3. Do not apply any rotation so that you can easily do it on non uniform background
4. Does not add any div element through CSS so that you can still work with the regular div background (in case you have code modifying it for example!)

The following CSS will shape the div with the bottom right corner cut off so that you can put any background:

-webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);

There are multiple SVG generators online:

• http://bennettfeely.com/clippy/
• http://cssplant.com/clip-path-generator

Support:

• Firefox: 3.5+
• Chrome: 24+
• Safari: 7+
• Opera: 15+
• Edge: 76+
• IE: None

Check https://caniuse.com/#feat=css-clip-path