Is it possible to achieve beveled edges with css? - css

Question

I am trying to play around with borders in CSS, but can't figure out how to achieve the following "boxy" look:
Is it possible? If so how can this be achieved (don't use dark background as it is there to add contrast)

Answer 1

It's possible - using :after and some additional CSS tricks with borders.
Example
http://jsfiddle.net/EaZ8r/3/
CSS
body {
background: #000;
}
#box {
height: 150px;
width: 200px;
background: #fff;
margin: 0 auto;
position: relative;
}
#box:after {
display: block;
background: blue;
width: 180px;
height: 0px;
border: 10px #000 solid;
border-top: 15px #eee solid;
content: "";
position: absolute;
bottom: 0px;
}
How it works?
The main thing here is good understanding how border is drown by browser. Check out this example: http://jsfiddle.net/n2nsB/. When two borders meet each other the canvas is split between them, what makes some kind of triangles drown there. This can be very useful, because of two things:
First of all, border-width can be set separately for all 4 borders, so you can change the angle of split! Check the example: http://jsfiddle.net/n2nsB/1/
Second, but even more important: you can set border-color equal to background to make it invisible! Example: http://jsfiddle.net/n2nsB/2/
You can set border even, when element has no height, what makes the borders only things that are drown for that element. Example: http://jsfiddle.net/n2nsB/3/
On the other hand, you should also know how :after pseudo-element works. You can find a lot of really good tutorials about that on the Web. I suggest this one for the begining: http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
So just combine all that things and get what you want.