Можно ли изменить цвет границы каждые 75 пикселей?

Я бы хотел поставить границу с тремя переменными цветами с высотой 75 пикселей на левой и правой стороне моего сайта. Левая сторона была легкой - было много divs каждый с высотой 75px. Я просто использовал селектор nth-of-type для чередования цветов границ. Однако правая часть моего сайта - это div неизвестной ширины и высоты, который содержит содержимое моего веб-сайта. Как я могу достичь такого же эффекта, если я не могу использовать селектор nth-of-type?Можно ли изменить цвет границы каждые 75 пикселей?

Вот участок границы моей левой руки страницы:

Example colored stripe

Я предпочел бы не использовать изображения. CSS3 прекрасен, пока он грациозно ухудшается, если браузер пользователя не соответствует спецификации.

источник

2014-02-03 user1787531

Я думаю, вы могли бы, вероятно, добиться этого с повторяющейся CSS градиентов. Не достаточно хорошо разбираюсь, чтобы рассказать вам, как, но читайте здесь, возможно, для начала перехода http://demo.hongkiat.com/css3-repeating-gradients/ – BLSully

http://css-tricks.com/examples/GradientBorder/ –

Сколько цветов будет на границе? 3? –

вы можете использовать repeating-linear-gradient с background-size или изображение, чтобы подделать эту границу.

div { 
    height:300px; 
    background:repeating-linear-gradient(to bottom,#0194BE 0, #0194BE 75px, orange 75px, orange 150px, #E2D397 150px, #E2D397 225px) repeat-y; 
    background-size:2px 225px; 
}

http://codepen.io/anon/pen/yDqrb

Else искать использование border-imagehttp://www.w3.org/TR/css3-background/#border-images.

, если вы используете несколько фона, вы можете нарисовать все границы и даже сделать поддельные столбцы

источник

2014-02-03 21:58:01

-1 нет правой границы для меня в текущем firefox –

обновлено, это должно было показать вам метод, вам нужен третий справа? –

Можно ли изменить цвет границы каждые 75 пикселей?

ответ

Смежные вопросы