Multiple background colors on div's background - css

Question

Hey there I'm struggling with creating multiple colour background with CSS. I tried gradient but it makes shades which I doesn't want. I want to create this with CSS:
Does anyone know how to create this without getting shades that I got when I used gradient.
Here is my html code.
<div id="head">
<h1>Mira's place</h1><br>
<h2><span id="quote">Mira is creating huge game named Rock Paper!</span></h2>
<ul>
<li>Home</li>
<li>Games</li>
<li>Applications</li>
<li>Contact</li>
</ul>
</div>

Answer 1

Try it again with gradients, but with this code:
#head /* or body */
{
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
BTW: I got this code from www.red-team-design.com. Here is the link.

Answer 2

Don't know, what you mean with shades. Does the following not look like you wanted to? (Some modifications may be needed, but it shows the way to go)
background: linear-gradient(135deg, #ffffff 0%,#ffffff 25%,#0011ff 25%,#0011ff 35%,#ffffff 35%,#ffffff 65%,#ff0000 65%,#ff0000 75%,#ffffff 75%,#ffffff 100%);
Here is the Fiddle.

Answer 3

.element{
border-bottom: 25px solid #2C58DF;
border-top: 25px solid #D71E26;
height: 25px;
width: 150px;
-webkit-transform-origin: top left;
-webkit-transform: translateX(165px) translateY(55px) rotate(135deg);
-moz-transform-origin: top left;
-moz-transform: translateX(165px) translateY(55px) rotate(135deg);
transform: translateX(165px) translateY(55px) rotate(135deg);
transform-origin: left top 0;
}
http://jsfiddle.net/etW25/