用底部三角形制作div

我一直在努力做白色形状与一个div：

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

如何获得 div 底部的对角线形状？

我有这个 div： 宽度：620px； 高度：440像素； 背景颜色：白色；

谢谢

编辑：忘记div后面的bg，我想让div带有对角线边框，而不是借助bg，因为它位于顶层

您还可以使用边框和:after伪选择器：http://jsfiddle.net/qQySU/ 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;
}

我给笔尖上了颜色，以便于识别边界。调整最后 3 行的边框宽度以获得您想要的提示。

Edit.:

兼容性参考：http://caniuse.com/css-gencontent http://caniuse.com/css-gencontent

Edit 2:

作为语义的交换，您可以让它更多地跨浏览器，您可以将内部元素的样式而不是放在:after伪选择器。