CSS：双色背景

Question

这可能不是最好的标题，但我很难找到合适的标题。基本上，我需要的是有一个双色背景图像，断点设置在一个特定的位置。

这就是我现在所拥有的：

可在this jsfiddle中测试。

这就是我想要实现的目标：

但有一点是，这个栏中的斜面需要与徽标对齐，如下所示：

如果没有倾斜，这可能会更容易，但我还没有找到实现所需行为的方法。我尝试做的是创建一个具有背景颜色的div，并在该div内部，第二个将放置在包含图像的顶部。

<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;
}

但是侧面的位置和颜色是错误的，如this jsfiddle：

所示

有什么建议吗？

Answer 1

看起来像是渐变的工作。

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

只需将其添加到您的css类并相应更改颜色。

Answer 2

尽管接受的答案很好，但我想分享使用渐变的替代方法。

这是一个选项，使用::before伪类和CSS border技巧来获得有角度的部分。您可以通过调整边框宽度来调整“角度”。可以根据需要调整伪元素的width属性。

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>