Как сверстать шапку?

Question

[Сева]

Привет!



Есть макет, в макете есть шапка, у шапки ширина 100% и сверху "радуга", как на рисунке. Ширина каждой цветной полосочки - 100 пикселей. Пока идеи такие:

1) Градиент - не получится задать ширину "цвета" в 100 пикселей
2) Сделать длинную одну картинку - возможно, но решение не кажется красивым

Еще идеи? Спасибо.

Comments

[WhiteSama]

самое простое картинка. можно блоками или списком и каждому по порядку цвет задать :nth-child ом

Answer 1

[Павел Радьков]

Это нужно делать градиентом:
- сверстать 6 цветов градиентом,
- поставить background-size: 600px 4px — чтобы каждая полоска была равно 100px,
- повторять фон только горизонтально background-repeat: repeat-x;

.container {
    margin: auto;
    background: #FFF;
    max-width: 960px;
    background-image: linear-gradient(to right,
        #50B5AD 0%,     #50B5AD 16.67%,
        #FFBBB7 16.67%, #FFBBB7 33.33%,
        #F8506C 33.33%, #F8506C 50%,
        #ADB347 50%,    #ADB347 66.67%,
        #F5CE42 66.67%, #F5CE42 83.33%,
        #A2DBD6 83.33%, #A2DBD6 100%);
    background-size: 600px 4px;
    background-repeat: repeat-x;
}

codepen.io/paulradzkov/pen/eZydxg

Answer 2

[lemme]

Можно тенями.

div {
	box-shadow: 
							600px 0 0 2px #2c3e50,
							500px 0 0 2px #e74c3c,
							400px 0 0 2px #f1c40f,
							300px 0 0 2px #9b59b6,
							200px 0 0 2px #3498db,
							100px 0 0 2px #2ecc71,
							0 0 0 2px #1abc9c;
}

Answer 3

[Vladimir Yamshik]

С помощью градиента

Answer 4

[display: block]

Максимальная ширина полоски предусматривает количество li-элементов.
codepen.io/anon/pen/BKJLmb

Answer 5

[Максим Тимофеев]

А нельзя вместо 100px использовать %, раз уж контейнер в %.
Но можно задать несколько background

background-color:#fff,#ff3,#ddd;
 background-position:0 0, 100px 0, 200px 0;

только не 3 прописать, а 29 или сколько там надо Вам. Или вместо background-color, background-image
Можно сделать и в js. Вычислить ширину родителя, разбить на куски по 100px и т.д.

Comments

[Сева]

background-color разве принимает множество аргументов?

[Максим Тимофеев]

Сева: Конечно нет. Тут я туплю. background-image надо, но вариант с тенями lemme мне кажется удобнее