Szyk CSS poszarpany o różnych rozmiarach/kolorowych obramowaniach

Question

Wygląda na to, że gdy masz element o różnych rozmiarach/kolorowych obramowaniach, możesz zobaczyć bardzo dziwną postrzępioną linię. Nigdy wcześniej tego nie zauważyłem, ale przyglądałem się super gorącemu nowemu projektowi Vimeo, kiedy zauważyłem (nie bardzo chcę powiedzieć "glitch") dziwne zjawisko.

Więc jeśli miał div wiszące, stylizowany jak w poniżej, zauważysz nasilenia pikseli (prawie jak to ustawić na wstawce, zamiast stałej ...)

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

Ktoś to zauważy/wiem, dlaczego tak się dzieje?

Answer 1

Dzieje się tak, ponieważ tworzy się "ramkę" wokół pudełka.

Wyobraź sobie drewnianą ramę do zdjęć, nie używasz czterech prostokątnych kawałków drewna do utworzenia ramki, używasz 4 kawałków trapezów i łączysz je ze sobą. Po ustawieniu większej szerokości z jednej strony, jej ukośne renderowanie do wewnątrz w kierunku rogu pudełka.

Powodem, dla którego wygląda źle jest to, że wygładzanie między granicami nigdy nie było dobre.

alternatywna

Można po prostu zrobić div:before{border-left: 15px solid #000;} jeśli nie chcą granice przycięte tak.

Answer 2

To nie jest "usterka" - tak działają granice. Łączą się po przekątnej.

Zażycie krok dalej i stworzyć <div> bez wysokości i szerokości, ale duża granicy można zobaczyć wynik - http://jsfiddle.net/mFzrA/

BTW - jest to technika używana do tworzenia czystych trójkąty CSS i dymki. Po prostu 3 przezroczyste ramki są przezroczyste, a 4 - ładny trójkąt.

Answer 3

Po prostu chciałem zasugerować użycie cienia-pudełka na granicy o większej szerokości, aby uniknąć "poszarpanej linii". Działa dla mnie, mam nadzieję, że pomaga :)

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