css - 将背景颜色的底边设为另一种颜色

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

就像这样:

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