css - 在 CSS 中使用线性渐变将 div 分成 2 种颜色但不等分

Question

我试图通过将 div 分成两半然后在它们之间创建一条对 Angular 线来在 div 中实现典型的样式，这样它看起来不错。截图如下:

<div class="contact hidden-xs">
    <div class="diagonal"></div>
</div>

.contact{
    width: 100%;
    height: 500px;
    background: linear-gradient(to right, #f87f73 50%, #292423 50%)
}

.diagonal{
    margin-left: 50%;
    width: 0px;
    border-width: 500px 200px 0px 0px;
    border-style: solid;
    border-color: #f87f73 transparent transparent transparent;
}

我就是这样做的。现在我的问题是，因为我在那里有对 Angular 线，所以它使红色部分变大了那么多。而且它在较小的屏幕上看起来不太好。如何使用线性渐变属性，使其不是 50% 50%，而是 40% 60%，这样对 Angular 线就没有太大区别了。当我在渐变属性中尝试 40% 60% 时，它混淆了渐变，这只是合乎逻辑的。如何实现？

Answer 1

我认为这段代码会像您的屏幕截图一样产生效果。

将此代码放入您希望看起来也像屏幕截图的选择器中。

  background-color: #f87f73;
  background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
  background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);