Как сделать градиентом 3 полосы разного цвета?

[Zverushka]

http://jsfiddle.net/Zverushka/eAX7f/

Получается не 3 полосы, а гриентный переход. Можно ли как-нибудь сделать именно 3 полосочки однопиксельные?

[npofopr]

http://jsfiddle.net/npofopr/eAX7f/1/

Мелкие штуки проще через box-shadow и border делать же. Хотя я не знаю, зачем вам такое.

[Chakra]

del  

Edited January 18, 2014 by Chakra

[Catherine]

http://jsfiddle.net/Cath_kb/eAX7f/3/

А вообще чем не нравится double border?

 

npofopr, мне кажется, что box-shadow не очень подходит для случая, когда нужны 3 вертикальные однопиксельные линии одинаковой ширины, или я просто не умею им пользоваться. http://jsfiddle.net/Cath_kb/eAX7f/7/

[Zverushka]

Скажем так - не обязательно 3 линии, это был лишь условный пример. Я пытаюсь пролить свет на некоторые смутные моменты в своих знаниях...

[advokatua]

http://jsfiddle.net/eAX7f/8/

А я и не знал, что градиент можно по пикселям строить. Думал только на процентах можно.

 

Как дурак пол дня высчитывал вот такие штуки http://jsfiddle.net/eAX7f/9/ для раздела практики ))

Вот теперь-то заживу 

Edited January 18, 2014 by advokatua

[Zverushka]

А я и не знал, что градиент можно по пикселям строить. Думал только на процентах можно.

Как дурак пол дня высчитывал вот такие штуки http://jsfiddle.net/eAX7f/9/ для раздела практики ))

  

Edited January 18, 2014 by Zverushka

[Catherine]

А я и не знал, что градиент можно по пикселям строить. Думал только на процентах можно.

В спецификации  в описании синтаксиса color-stop указана следующее правило:

<color-stop> = <color> [ <percentage> | <length> ]?

Это означает, что можно задавать не только проценты, но и длину (em, px). Есть только рекомендация их не смешивать, во избежание нарушения порядка отображения:

It is recommended that authors not mix different types of units, such as px, em, or %, in a single rule, as this can cause a color-stop to unintentionally try to move before an earlier one