【问题标题】：Can I create border-bottom without diagonal corner? [duplicate]我可以创建没有对角角的边框底部吗？ [复制]
【发布时间】：2014-03-20 13:12:39
【问题描述】：

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

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/

作为跨浏览器有没有简单的方法？

【问题讨论】：

你可以试试伪元素，还是必须是边框？ jsfiddle.net/3jHG8/1
SVG 对象是第二种选择

标签： html css border flat

【解决方案1】：

只需使用css box-shadow，如下所示：

JSFIDDLE DEMO 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;
}

或仅box-shadow：

.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;
}

JSFIDDLE DEMO 2

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

【讨论】：

【解决方案2】：

你问的是不可能的。相反，您可以使用以下内容：

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

.ts {    
 height:100px;
 width:100px;
 padding:10px;
 border-bottom:10px solid #dfd;
 background-color:#f00;
}

希望这会有所帮助。

【讨论】：