CSS: Two-color background - html

Question

This might not be the best title, but I am having a hard time trying to find the appropriate one. Basically, what I need is to have a two-color background image, with the breakpoint set to a specific position.
Here's what I have right now:
Which can be tested in this jsfiddle.
And this is what I am trying to achieve:
One thing though, is that the slant in this bar needs to be aligned with the logo, as shown below:
If there was no slant, this might be easier, but I have not found a way to achieve the desired behavior. What I tried doing was creating a div with a background color, and inside that div, a second one that would be placed on top containing the image.
<div class="line-container">
<div class="line">
</div>
</div>
.line-container{
width: 100%;
background-repeat: repeat-x;
background-color: #009b3a;
}
.line{
background-image: url('http://s8.postimg.org/fc0umdjut/image.png');
display: block;
width: 50m;
margin: 0 auto;
height: 10px;
}
But position and color to the sides are wrong, as shown in this jsfiddle:
Any advise?

Answer 1

Seems like a job for a gradient.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg, #1e5799 0%, #1e5799 48%, #2989d8 48%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Simply add this to your css class and change the colors within accordingly.

Answer 2

Even though the accepted answer is great, I wanted to share an alternative to using gradients.
Here's an option using the ::before pseudo-class with a CSS border trick to get the angled portion. You can adjust the "angle" by tweaking the border widths. The width property on the pseudo-element can be adjusted, as needed.
div {
background: green;
height: 10px;
position: relative;
}
div:before {
background: darkgreen;
border: solid transparent 0;
border-bottom-width: 10px;
border-right-color: green;
border-right-width: 10px;
box-sizing: border-box;
content: '';
height: 10px;
position: absolute;
width: 5em;
}
<div></div>