Make div with bottom triangle

Question

I have been trying to do the white shape with a div:

http://sircat.net/joomla/sircat/mies/2.png

how do I get the diagonal shapes of the bottom of the div?

I have this for the div: width: 620px; height: 440px; background-color: white;

thank you

Edit: just forget the bg behind the div, I want to make the div with the diagonal borders, not with the help of the bg because it is in the top layer

Answer 1

You can also use borders and the :after pseudo selector: http://jsfiddle.net/qQySU/

#pointed {
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: white;
}

#pointed:after,
#pointed::after {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50%;
    content: '';
    width: 0;
    height: 0;
    border-top: solid 150px red;
    border-left: solid 100px transparent;
    border-right: solid 100px transparent;
}

I've colored the tip for easy identification of the borders. Play around the border widths on the last 3 lines to get the tip you want.

Edit.:

Reference for compability: http://caniuse.com/css-gencontent

Edit 2:

In exchange for semantics, you can get it more crossbrowser you can place the stle on a inner element instead of on the :after pseudo selector.