我想创建一个具有不同颜色的盒子，左、右和顶部颜色为红色，底部颜色为灰色，但我想要盒子的平坦底部边框

HTML

<div class="ts"></div>

CSS

.ts {    
    height:100px;
    width:100px;
    border-width:10px 10px 20px 10px;
    border-style:solid;
    border-color:#f00 #f00 #ddd #f00;
}

当我用上面的代码创建它时，看起来像这样

但我不希望底部边框作为对角线，我希望它为；

http://jsfiddle.net/3jHG8/

有没有一种简单的方法可以跨浏览器做到这一点？

只需使用CSS 盒子阴影如下：

JSFIDLE 演示 1

HTML

<div class="ts"></div>

CSS

.ts {    
    height:100px;
    width:100px;
    border-width:10px 10px 0px 10px;
    border-style:solid;
    border-color:#f00 #f00 transparent #f00;
    box-shadow: 0 20px 0 #ddd;
}

or 盒子阴影 only:

.ts {
height: 100px;
width: 100px;
box-shadow: inset 0 10px 0 0 #f00,inset 10px 0 0 0 #f00,inset -10px 0 0 0 #f00, 0 20px 0 #ddd;
}

JSFIDLE 演示 2

Use CSS3 PIE，模拟 IE7 和 IE8 旧版本中的一些文本阴影。