Usuwanie efektu ukosowania w rogu granic

Question

Jeśli element występuje na stronie z więcej niż jednym obramowaniem, naroże, w którym te kolory spotykają się, tworzy domyślnie fazę. Wydaje się to dziwnym wyborem dla stylu z pogranicza. Zamiast tego wolałbym, aby jedna z granic "obezwładniała" drugą granicę w taki sposób, aby zamiast niej była wyświetlana linia prosta.

Aby zilustrować ten efekt, należy rozważyć następujące kwestie:

patrz przykład jsFiddle przykład stworzyłem here.

Dwie pierwsze pozycje wyświetlają domyślne zachowanie z fazowaniem. Dwa dolne wyświetlają pożądane, oczekiwane zachowanie, w tym przypadku skrajne "obezwładnia" lub "przesłonia" róg obramowania - lewy i graniczny - prawy.

Znaczniki do górnej obudowy:

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

a CSS:

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

Znaczniki na dolną część obudowy:

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

a CSS:

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

Chociaż druga metoda, którą wymyśliłem, daje efekt, który chcę, wydaje się, że jest to niepotrzebnie żmudne dla czegoś, co prawdopodobnie przyjąłby stan domyślny. Gdybym chciał, aby na przykład obramowanie lewej strony zastąpiło inne granice, musiałbym poradzić sobie z pewnym szaleństwem elementu.

Pytanie (wreszcie)

Czy istnieje łatwiejsza metoda usuwania domyślny stożkowo-zachowania obserwowane na wszystkich przeglądarkach?

Mimo, że powyższy przypadek jest w większości łatwy do uchwycenia krawędzi lub obramowania, to nie jest to łatwe zadanie, na przykład, gdy potrzebuję obramowania w lewo i w prawo na granicy przesłonić granicę i granicę.

Answer 1

W ten sposób granice działają, uważam, że nie da się tego zmienić bez dodatkowego elementu.

Zamiast pustych elementów div można użyć opakowania typu divper.

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

Demo: http://jsfiddle.net/fmcvY/

Istnieje inny sposób to zrobić z :before/:after elementów psuedo ale to trochę bałaganu, jednak wymaga to żadnych dodatkowych znaczników:

<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 */ 
} 

Możesz napisać CSS na wiele różnych sposobów, aby osiągnąć ten sam efekt.Demo: http://jsfiddle.net/fmcvY/3/

Answer 2

Jeśli nie potrzebują wsparcia dla starszych przeglądarek (IE 8 i mniej), można użyć 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/