使背景颜色的下边缘成为另一种颜色

Question

我希望background-color的底部是另一种颜色。我确定它涉及linear-gradient？但不确定如何实施它

示例代码：

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

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

我最终希望上述代码看起来如何：

任何帮助都将不胜感激。

Answer 1

就像这样：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

解决方案1：伪元素

之后

您可以在所需的测量中将三角形放置一个位置。此元素不会影响元素内的内容，因为它具有绝对位置

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

解决方案2：渐变

此线性渐变可以是一种解决方案，但可能存在一些分辨率问题

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助：＆gt;