Use linear gradient in CSS to split div in 2 colors but not in equal halves

问题

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

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?

回答1:

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

回答2:

You can do that using border and flexbox

Snippet

.content {
  width: 100%;
  background-color: grey;
  display: flex;
  justify-content: flex-end
}

.diagonal {
  border-bottom: 100px solid red;
  border-left: 75px solid rgba(0, 0, 0, 0);
  height: 0;
  width: 30%;
}

<div class="content">
  <div class="diagonal"></div>
</div>

Please notice you can change the width as you need.

来源：https://stackoverflow.com/questions/25958315/use-linear-gradient-in-css-to-split-div-in-2-colors-but-not-in-equal-halves

标签

css

css3

linear-gradients