我可以创建没有对角线的边框吗？ [英] Can I create border-bottom without diagonal corner?

问题描述

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

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

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

但我不希望将下边框作为对角线，我希望它成为;

使用 CSS3 PIE

a>，模拟IE7和IE8旧版本中的一些文字阴影。

I want to create a box with different color, left,right and top color red and bottom color is grey but I want flat bottom-border of box

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

When I create it with above code, It seems like this

But I don't want bottom-border as diagonal corner, I want it as;

http://jsfiddle.net/3jHG8/

Is there an easy way to do it as crossbrowser?

解决方案

Just use css box-shadow as follow:

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

or box-shadow 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;
}

JSFIDDLE DEMO 2

Use CSS3 PIE, to emulates some text-shadow in older versions of in IE7 and IE8.

这篇关于我可以创建没有对角线的边框吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！