Удаление эффекта скоса на углу границ

Question

Если элемент существует на странице с более чем одним цветом границы, то угол, в котором эти цвета встречаются, создает по умолчанию скос. Это кажется странным выбором для стиля пограничного угла. Вместо этого я предпочел бы, чтобы одна из границ «пересиливала» другую границу, так что вместо нее показана прямая линия.

Для иллюстрации этого эффекта, необходимо учитывать следующее:

См пример jsFiddle пример, который я создал here.

Верхние два элемента отображают поведение по умолчанию, скошенное. Нижние два отображают желаемое, ожидаемое поведение, где в этом случае граничные верхние «пересиливают» или «переопределяют» угол границы - слева и справа.

Разметка для верхней части корпуса:

<div class="container"> 
    <div class="border">Item one</div> 
    <div class="border">Item two</div> 
</div> 

И в CSS:

.container { 
    margin: 5px; 
    width: 150px; 
    background: yellow; 
} 
.border { 
    padding: 5px; 
    border: 15px solid red; 
    border-top: 15px solid teal; 
} 

Разметка для нижней части корпуса:

<div class="container"> 
    <div class="border-top"></div> 
    <div class="border-reg">Item one</div> 
    <div class="border-top"></div> 
    <div class="border-reg">Item two</div> 
</div> 

И в CSS:

.border-top { 
    border-top: 15px solid teal; 
} 
.border-reg { 
    border: 15px solid red; 
    border-top: 0; 
    padding: 5px; 
} 

Хотя второй метод, который я разработал, производит эффект, который я хочу, кажется, что это излишне утомительно для того, что я предположил бы иметь состояние по умолчанию. Если бы я хотел, чтобы границы были слева, чтобы переопределить другие границы, например, мне пришлось бы иметь дело с некоторыми float: left и безумным безусловным элементом.

Вопрос (Наконец)

Есть ли более простой способ удаления скоса-поведение по умолчанию наблюдается во всех браузерах?

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

Answer 1

Именно так работают границы, я считаю, что нет никакого способа изменить это без дополнительного элемента.

Вместо пустых divs вы можете использовать разделители обертки.

<div class="outer"> 
    <div class="inner">test</div> 
</div> 

.inner { 
    padding : 5px; 
    border : 15px solid red; 
    border-top: 0; 
} 
.outer { 
    border-top : 15px solid teal; 
} 

Демо: http://jsfiddle.net/fmcvY/

Там еще один способ сделать это с :before/:after псевдопользователей элементов, но это немного хаотичным, однако это не требует дополнительной разметки:

<div>test</div> 

div { 
    padding : 5px; 
    border : 15px solid red; 
    border-top: 0; 
    position:relative; 
    padding-top: 20px; /* border width plus desired padding */ 
} 
div:before { 
    content:' '; 
    display:block; 
    background: teal; 
    height:15px; 
    padding:0 15px; /* border width plus div padding */ 
    width:100%; 
    position:absolute; 
    top: 0; 
    left:-15px; /* border width plus div padding */ 
} 

Вы можете написать CSS несколькими способами, чтобы добиться такого же эффекта.Демонстрация: http://jsfiddle.net/fmcvY/3/

Answer 2

Если вам не нужна поддержка старых браузеров (IE 8 и меньше), вы можете использовать box-shadow:

.border { 
    padding : 35px 20px 20px 20px; 
    box-shadow: inset 0 0 0 15px red, inset 0 15px 0 15px teal; 
} 

http://jsfiddle.net/fTGDs/