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 either; I'm looking at a quite large corner cut at that angle. This effect:

How should I go about it?

Answer 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