背景颜色的水平和垂直渐变

Question

我正在尝试添加一个黑色矩形作为红色背景 div。

我设法使水平硬淡化：

background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 60%, rgba(208,6,30,1) 60%);

好像是水平或垂直。我可以两者都做吗？

我想用 CSS 执行此操作，而不是添加黑色图像作为背景。

Answer 1

如果将 background-color 设置为红色，则可以用黑色矩形覆盖它，例如，宽度为 60%，高度为 50%，并且从底部开始定位。

div {
  --r: rgba(208, 6, 30, 1);
  --b: rgba(0, 0, 0, 1);
  display: inline-block;
  width: 50vmin;
  height: 30vmin;
  background-color: var(--r);
  background-image: linear-gradient(var(--b), var(--b));
  background-size: 60% 50%;
  background-position: left bottom;
  background-repeat: no-repeat;
}

<div></div>

Answer 2

使用conic-gradient:

.box {
  display: inline-block;
  width: 300px;
  height: 200px;
  background: conic-gradient(from -90deg at 70% 50%, rgb(208,6,30) 75%, black 0);
  /* adjust the "at 70% 50%" to control the position */
}

<div class="box"></div>

背景颜色的水平和垂直渐变

Both horizontal and vertical gradient on background color

css

linear-gradients