Come creare uno sfondo usando il gradiente CSS con un colore piatto?

Question

Un backgrond come questo con la stessa altezza di rosso e giallo.

Answer 1

Utilizzo di ColorZilla gradient generator, è sufficiente impostare due colori nella stessa posizione% e si otterrà un bordo duro tra i due colori.

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

Il generatore di gradazioni di Colorzilla è un buon inizio, ma il codice è terribile secondo me.
Non vedrai mai facilmente se i colori sono corretti, non c'è uscita di codici esadecimali corti come #ff0 e, cosa più importante rispetto alla risposta sopra, lo standard W3C è stato modificato in to <side-or-corner>.

Quindi dato la tua domanda dopo un gradiente piatto con stessa altezza dell'area di rosso e giallo questo è il mio codice preferito:

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 */ 

See example on CodePen.

Si noti inoltre che è possibile tralasciare la deprecata proprietà filter per IE in questo caso, semplicemente perché non sono presenti arresti colore.
Se si conosce l'altezza esatta della scatola, è anche possibile utilizzare i valori px invece dei valori % per gli arresti colore.

Aggiornamento 2016/01/16: Né -o- prefisso venditore è necessario, né -ms- (IE 10 è il primo IE per sostenere gradienti e supporta gli standard W3C sintassi). Vedere http://caniuse.com/#feat=css-gradients
Aggiornamento 2016-01-27: Preferire lowercase hex color values for better gzipping e indicare chiaramente background-color e background-image anziché background. Anche rimosso to bottom in quanto è il valore predefinito.