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

问题描述

我希望background-color的底部是另一种颜色.我确定它涉及到linear-gradient吗?但不确定如何实现

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

示例代码:

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

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

我最终希望上面的代码如何显示:

任何帮助将不胜感激.

推荐答案

只需这样:

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

这篇关于使背景色的底部边缘成为另一种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！