Slanted Corner on CSS box

Question

I have been playing with CSS for only a short time and am trying to have a normal box but with the top left hand corner cut off at a 45 degree angle. Not a small amount eith

Answer 1

I came up with a responsive friendly solution of Ray Toal fiddle : http://jsfiddle.net/duk3/hCaXv/

The html :

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.
Hello llo hello llo hello hello hello llo hello hello hello hello hello hello hello hello

The css :

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 100%;
    box-sizing:border-box;
    height: 0px;
    border-bottom: 2em solid red;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
}
.main {
    background-color: red;
    padding: 0 2em;
}

Hope it helps !