在CSS中使用线性渐变来分割2种颜色的div但不是相等的一半

Question

我试图通过将它分成两半然后在两者之间创建对角线来实现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;
}

这就是我这样做的方式.现在我的问题是,因为我有那个对角线,所以它使红色部分变得更大.它在小屏幕上看起来不太好.如何使用线性渐变属性使其不是50%50%,而是40%60%,因此对角线没有太大的区别.当我在渐变属性中尝试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%);