Make bottom edge of background colour another colour

问题

I want the bottom of my background-color to be another colour. I'm sure it involves a linear-gradient? but unsure on how to implement it

Sample code:

.background{
  height:100px;
  width:200px;
  background-color: #11143b;
  background: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
}

<div class="background">
</div>

How I eventually want the above code to look:

Any help would be appreciated.

回答1:

Simply like this:

.background{
  height:100px;
  width:200px;
  background: 
    linear-gradient(to bottom right, transparent 49%,red 52%) bottom / 100% 20px no-repeat,
    #11143b;
}

<div class="background">
</div>

回答2:

Solution 1: After pseudo element

You can make a triangle an position it in the desired loscation. This element wont affect the content inside your element as it has a position of absolute

.background{
  height:100px;
  width:200px;
  background-color: #11143b;
  position: relative;
}


.background:after{
  content: '';
  position: absolute;
  width: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 200px;
  border-color: transparent transparent #ff0000 transparent;
}

<div class="background">
</div>

Solution 2: Gradient

This linear gradient can be a solution but might have some resolution problems

.background{
  height:100px;
  width:200px;
  background-color: #11143b;
  background: linear-gradient(0.48turn, #11143b 85%, red 75%);
}

<div class="background">
</div>

Hope this helps:>

来源：https://stackoverflow.com/questions/50911876/make-bottom-edge-of-background-colour-another-colour

标签

css

css3

linear-gradients