Bordo CSS frastagliato con bordi di dimensioni/colore diversi

Question

Sembra che quando si dispone di un elemento con bordi di dimensioni/colori diversi, è possibile che si verifichi una strana linea frastagliata. Non l'avevo mai notato prima, ma stavo guardando il nuovo design di Vimeo quando mi accorsi di questo strano evento (non voglio proprio dire "glitch").

Quindi, se si ha un div appendere fuori, designato come in seguito, si noterà un passo di pixel (quasi come se fosse impostato su inserto, piuttosto che solida ...)

div { 
    height   : 25px; 
    width    : 50px; 
    background  : #eee; 
    border-style  : solid; 
    border-color  : green; 
    border-left-color : black; 
    border-width  : 3px 3px 3px 15px; 
} 

Chiunque notare questo/sai perché succede?

Answer 1

La ragione per cui questo accade è perché sta creando una "cornice" attorno alla scatola.

Pensa a una cornice di legno, non usi quattro pezzi rettangolari di legno per creare una cornice, usi 4 pezzi trapezoidali e li metti insieme. Quando si imposta una larghezza maggiore su un lato, la si diagonalmente verso l'interno verso l'angolo della scatola.

Il motivo per cui sembra male è perché l'antialiasing tra i confini non è mai stato buono.

alternativa

Si può solo fare div:before{border-left: 15px solid #000;} se non si desidera che i confini tagliate così.

Answer 2

Questo non è un "problema tecnico": è come funzionano i bordi. Si collegano in diagonale.

Se si prende un ulteriore passo avanti e creare un <div> senza altezza e larghezza, ma un grande bordo si può vedere il risultato - http://jsfiddle.net/mFzrA/

BTW - Questa è la tecnica utilizzata per creare triangoli CSS puri e fumetti. Rendi trasparenti 3 dei bordi e il 4 ti dà un bel triangolo.

Answer 3

Volevo solo suggerire di usare box-shadow sul bordo con una larghezza di bordo maggiore per evitare la "linea frastagliata". Funziona per me, spero che aiuti :)

div { 
    height   : 25px; 
    width    : 50px; 
    background  : #eee; 
    border-style  : solid; 
    border-color  : green; 
    border-width  : 3px 3px 3px 0px; 
    box-shadow:-15px 0px black; 
}