CSS: 两色背景

Question

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

这是我现在拥有的：

可以在this jsfiddle中进行测试。

我想要实现的是：

不过，这个条形图的斜线需要与标志对齐，如下所示：

如果没有倾斜，这可能会更容易，但我还没有找到实现所需行为的方法。我尝试创建一个带有背景颜色的 div，在该 div 内部，放置一个包含图像的第二个 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所示：

有什么建议吗？

- Gonzalo

---

请尝试这个链接：https://jsfiddle.net/f8p3ahb3/5/。 - Nenad Vracar

谢谢@NenadVracar！那真的很有帮助！+1 - Gonzalo

@Nenad，我仍然有一个关于位置的问题。斜线应该始终与徽标对齐，但我似乎无法通过上述解决方案实现这一点。你有什么想法吗？ - Gonzalo

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类中，并根据需要更改其中的颜色。

- Nick Nasirpour

---

感谢您的迅速回复。问题是图像有倾斜而不是直线。使用渐变色是否可能解决这个问题？ - Gonzalo

我刚刚更新了答案，包括在两种颜色连接的点处添加水平倾斜！这是通过旋转渐变来完成的。 - Nick Nasirpour

谢谢@Nick。不过我还有一个位置的问题。斜线应该始终与标志对齐，但我似乎无法通过上面的解决方案实现这一点。有什么想法吗？ - Gonzalo

你需要将所有渐变中的两个48%调整为接近20%的数字。如果网站是响应式的，你将需要使用媒体查询来定位它的正确位置。 - Nick Nasirpour

谢谢Nick。但是使用%时，位置会根据屏幕大小而变化。放大/缩小可以在这个新的jsfiddle中看到我的意思。 - Gonzalo

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>

- jeffjenx

---

+1 谢谢 @Quantastical！这是一个很好的解决方案。但是，我似乎无法调整伪元素的宽度，以便斜线始终显示在与徽标相同的位置。对此有什么想法吗？这是一个更新的 jsfiddle，其中包含您的建议，使事情变得更加容易： - Gonzalo