Могу ли я создать нижнюю границу без диагонального угла?

Я хочу создать коробку с другим цветом, левый, правый и верхний цвет красный, а нижний цвет серый, но я хочу, чтобы нижняя граница коробки была плоской.

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/

Есть ли простой способ сделать это как кроссбраузерный?


html css border flat
person midstack    schedule 20.03.2014    source источник
comment
Вы можете попробовать псевдоэлемент или это должна быть граница? jsfiddle.net/3jHG8/1   -  person Chad    schedule 20.03.2014
comment
SVG-объекты — второй вариант   -  person Nilzor    schedule 20.03.2014

Ответы (2)


arrow_upward
14
arrow_downward

Просто используйте 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.

person Gildas.Tambo    schedule 20.03.2014

arrow_upward
-1
arrow_downward

То, что вы просите, невозможно. Вместо этого вы можете использовать что-то вроде этого:

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

Надеюсь это поможет.

person Rishabh Shah    schedule 20.03.2014