Как сделать фон с помощью CSS-градиента с плоским цветом?

Question

Подобный фон с красной и желтой высотой.

Answer 1

Используя генератор градиентов в Colorzilla , просто установите два цвета в одно и то же местоположение%, и вы получите твердую грань между этими двумя цветами.

background: #ffff00; /* Old browsers */
background: -moz-linear-gradient(top, #ffff00 30%, #ffff00 30%, #fe0000 30%); /*  FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffff00), color-stop(30%,#ffff00), color-stop(30%,#fe0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#fe0000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* W3C */

Answer 2

Генератор градиента Colorzilla - хорошее начало, но код, на мой взгляд, ужасен.
Вы никогда не поймете, правильно ли цвета, нет вывода коротких шестнадцатеричных кодов, таких как #ff0 и - что наиболее важно по сравнению с ответом выше - стандарт W3C изменился на to <side-or-corner>.

Итак, учитывая ваш вопрос после плоского градиента с такой же высотой красной и желтой области, это мой предпочтительный код:

background-color: #ff0; /* Old browsers */
background-image: -webkit-gradient( linear, left top, left bottom, color-stop( 50%, #ff0 ), color-stop( 50%, #ff0 ), color-stop( 50%, #fe0000 ) ); /* Chrome, Safari4+ */
background-image: -webkit-linear-gradient( top, #ff0 50%, #ff0 50%, #fe0000 50% ); /* Chrome10+, Safari5.1+ */    
background-image:    -moz-linear-gradient( top, #ff0 50%, #ff0 50%, #fe0000 50% ); /* Fx3.6+ */   
background-image:         linear-gradient(      #ff0 50%, #ff0 50%, #fe0000 50% ); /* W3C */

См. Пример на CodePen .

Также обратите внимание, что в этом случае вы можете не использовать устаревшее свойство filter для IE, просто потому, что в него не включены цветовые ограничения.
Если вы знаете точную высоту рамки, вы также можете работать со значениями px вместо значений % для цветных остановок.

Обновлено 2016-01-16: Не требуется ни префикс -o- поставщика, ни -ms- (поскольку IE 10 является первым IE, поддерживающим градиенты и поддерживает синтаксис стандартов W3C) . См http://caniuse.com/#feat=css-gradients
Обновлено 2016-01-27: предпочитайте шестнадцатеричные значения цвета в нижнем регистре для лучшего сжатия и четко указывайте background-color и background-image вместо background. Также удалено to bottom как значение по умолчанию.