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

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>

Answer 2

Solution 1: After pseudo element

您可以将三角形定位在所需的位置。该元素不会影响元素内的内容，因为它的位置是绝对的

.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

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

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

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

希望对您有所帮助：>

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

Make bottom edge of background colour another colour

css

linear-gradients