linear gradient div using CSS3 - html

Question

Please help me how I can make div using css like below image path.
Here is my code that is so far...
http://jsfiddle.net/L8FfE/
<table class="screenheader" cellspacing="0" cellpadding="0" width="100%" style="padding-top: 5px;">
<tr style="font-family: Calibri, Arial, Sans-Serif; font-size: 40pt; font-weight: bold;
color: #fff; background: repeating-linear-gradient(180deg, #23538A , #A7CFDF 5px, #23538A 5px, #A7CFDF 10px);">
<td width="100%" style="padding-bottom: 5px;">
<div id="meetingname" width="100%" style="padding-left: 20px; text-align: left;">
HI Test
</div>
</td>
<td width="100%" style="padding-left: 20px; text-align: left;">
</td>
</tr>
</table>

Answer 1

Is this what you mean (beside the colors, I can't get those right)?
http://jsfiddle.net/L8FfE/2/
Html:
<div id="background">
<div id="overlay"></div>
</div>
CSS:
div#background {
width: 100%;
height: 50px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#053F63), to(#105C97));
background: -webkit-linear-gradient(#053F63 0%, #105C97 100%);
background: -moz-linear-gradient(#053F63 0%, #105C97 100%);
background: -o-linear-gradient(#053F63 0%, #105C97 100%);
background: linear-gradient(#053F63 0%, #105C97 100%);
}
div#overlay {
font-family: Calibri, Arial, Sans-Serif;
font-size: 40pt;
font-weight: bold;
color: #fff;
width: 100%;
height: 50px;
background: -moz-repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
background: -webkit-repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
background: repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
-webkit-mask-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.6, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 1)));
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
mask-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
mask-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
mask-image: linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
}

Answer 2

That's not quite right. You'll need another div to achieve both the left gradient and vertical gradient. I've written this for Chrome only, and you'll also have to change the #colors to rgba, but you can see in the JS fiddle here it looks much more like the jpeg.
HTML
<div class="rightGradient">
<div class="horizontal stripes"></div>
<div class="topGradient"></div>
</div>
CSS
.stripes {
position: relative;
height: 100px;
width: 375px;
-webkit-background-size: 100% 6px;
}
.horizontal {
background-color: transparent;
background-image: -webkit-linear-gradient(top, #0f5b97 50%, transparent 50%, transparent);
}
.rightGradient {
position: absolute;
height: 100px;
width: 375px;
background-image: -webkit-linear-gradient(right, #074166 20%, #0f5b97 70%);
}
.topGradient {
position: absolute;
top: 0px;
height: 100px;
width: 375px;
background-color: transparent;
background-image: -webkit-linear-gradient(286deg , #074166 -20%, transparent 70%);
}