html - 斜めの角のないボーダーボトムを作成できますか?

Question

左、右、上の色が赤で、下の色が灰色の異なる色のボックスを作成したいのですが、ボックスの下部境界線をフラットにしたい

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/

クロスブラウザとして簡単に実行する方法はありますか?

Answer 1

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.

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

お役に立てれば。