在CSS中使用线性渐变将div分为2种颜色，但不等分 [英] Use linear gradient in CSS to split div in 2 colors but not in equal halves

问题描述

我正在尝试通过将div分成两半然后在它们之间创建对角线的方法来实现div中的典型样式，因此看起来不错.下面的屏幕截图:

I am trying to achieve a typical style in a div by splitting it into 2 halves and then creating a diagonal in between so it looks good. Screenshot below:

<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％时，它会混合渐变，这只是合乎逻辑的.如何进行这项工作?

This is how I have done this. Now my problem is that since I have that diagonal there, it is making the red part bigger by that much. And it does not look good in smaller screens. How do use the linear gradient property so that it is not 50% 50%, instead it is something like 40% 60%, so that the diagonal doesn't make much difference. When I try 40% 60% in the gradient property it is mixing up the gradients which is only logical. How to make this work?

推荐答案

我认为这段代码会像您的屏幕截图一样发挥作用.

i think this code will make effect like your screen shot.

将此代码放到您想要的选择器中，就像屏幕截图一样.

put this code in selector you want too look like the screen shot.

  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%);

这篇关于在CSS中使用线性渐变将div分为2种颜色，但不等分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！