Border schuin

Zo:

html:

<div class="window">
    <div class="caption"></div>
    <div class="box"></div>
</div>

css:

body {
    background-color:#EEE;
}
.window {
    width:302px; /* 1 + 300 + 1 */
    height:324px; /* 1 + 20 + 1 + 1 + 300 + 1 */
}
.caption{
    width:300px;
    height:20px;
    background-color:blue;
    border:1px solid blue;
}
.box{
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color:white;
    width:300px;
    height:300px;
}

Dat meen je niet :-). Dit moet toch veel simpeler kunnen..

Zo moeilijk is het niet. Het probleem wat jij schetst is simpel dat randen van een vierkant in de hoeken elkaar overlappen. Wanneer je maar alle randen in dezelfde kleur houdt is dat geen probleem maar wanneer de randen meerdere kleuren hebben krijg je overlappingen in de hoeken die je door het kleurverschil wél ziet.

Borders zijn altijd schuin in de hoek, omdat je dan de hoek mooi verdeelt. Dat zie je erg mooi met meerdere kleuren: http://jsbin.com/lopererulo/1/edit?css,output

Merk op dat de hoeken alleen schuin worden wanneer de andere kant van de hoek ook een border heeft. Alleen een border-top zou dus een rechte balk opleveren. Dit betekend dat je de grote balk als border-top kan doen en de grijze border als outline: http://jsbin.com/lopererulo/2/edit?css,output (merk op dat outline altijd alle zijden is en je dus ook grijze border aan de bovenkant hebt)

Een andere oplossing is wat Frank deed, maar dan met pseudo elements: http://jsbin.com/lopererulo/3/edit?css,output

Merci Wouter,

Die pseudo elements heb ik nog niet onder de knie. (outline had ik ook niet aangedacht maar dat is simpel)

Weet jij (of iemand anders) nog een duidelijke uitleg over die pseudo elementen?

:before is een pseudo element?

Frank:

• [li]Pseudo elements (:before en :after) http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/[/li]
  [li]Pseudo classes (:first-word, :nth-child(1n + 2), etc.) http://css-tricks.com/pseudo-class-selectors/[/li]

De eerste ging het om inderdaad. Ik heb het even rustig doorgelezen en dat werkt zeer verhelderend moet ik zeggen :)

Nogmaals dank Wouter.