Borde CSS irregular con diferentes bordes de tamaño/color

Question

Parece que cuando tienes un elemento con bordes de diferentes tamaños/colores, puedes ver una línea dentada muy extraña sucediendo. Nunca me había dado cuenta de esto antes, pero estaba mirando el nuevo diseño súper caliente de Vimeo cuando noté esto (realmente no quiero decir "error") ocurrencia extraña.

Así que si había un div salir, con el estilo como en la de abajo, verás que hay una intensificación de píxeles (casi como se establece en la inserción, en lugar de sólidos ...)

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

Cualquier cuenta de esto ¿Sabes por qué sucede?

Answer 1

La razón por la que esto sucede es porque está creando un 'marco' alrededor de la caja.

Piense en un marco de madera, no debe usar cuatro piezas rectangulares de madera para crear un marco, debe usar 4 piezas trapezoidales y juntarlas. Cuando establece un ancho mayor en un lado, lo hace diagonalmente hacia adentro, hacia la esquina del cuadro.

La razón por la que se ve mal es porque el antialiasing entre las fronteras nunca ha sido bueno.

Alternativa

Se podía hacer div:before{border-left: 15px solid #000;} si no desea que los bordes recortados por el estilo.

Answer 2

Eso no es un "problema", sino cómo funcionan las fronteras. Se conectan diagonalmente

Si se toma un paso más allá y crear un <div> sin altura y anchura, pero una gran frontera se puede ver el resultado - http://jsfiddle.net/mFzrA/

BTW - Esta es la técnica que se utiliza para crear triángulos CSS puros y globos de texto. Simplemente haces transparentes 3 de los bordes y el 4 te da un bonito triángulo.

Answer 3

Solo quería sugerir el uso de la sombra de caja en el borde con un ancho de borde mayor para evitar "línea dentada". Funciona para mí, espero que ayude :)

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