css - 如何组合渐变以在相反的轴上工作？

Question

本质上，我想创建一个元素，将“向右”渐变与一定百分比的颜色停止点以及剩余宽度的另一个颜色停止点与“向下”渐变相结合，将两种颜色淡化为透明。获取色停部分很容易，获取褪色部分也很容易；我只是不知道如何同时获得两者。

/*I can get this:*/

div {
  width: 500px;
  height: 100px;
}

.color-change {
  background: linear-gradient(to right, rgb(255, 175,157) 80%, rgb(255, 95, 89) 80%);
}

/*or this:*/
  
.fade {
  background:linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
  
  /* but not both*/

<div class="color-change"></div>

<div class="fade"></div>

这可能并不难，但我找不到任何完全可以做到这一点的示例。我可以只使用 png，但似乎这应该可以在 CSS 中实现。感谢您的任何建议(或更好的解决方案)。

Answer 1

使用 CSS ::before (:before)

In CSS, ::before creates a pseudo-element that is the first child ofthe selected element. It is often used to add cosmetic content to anelement with the content property. It is inline by default. https://developer.mozilla.org

div {
  width: 500px;
  height: 100px;
}

.fade {
  background: linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
  position: relative;
}

.fade::before {
  display: inline-block;
  content: "";
  height: 100%;
  width: 20%;
  background: black;
  position: absolute;
  right: 0;
  background: linear-gradient(0deg, rgba(246,115,115,1) 4%, rgba(250,192,194,1) 34%, rgba(255,233,234,1) 66%, rgba(255,255,255,1) 100%);       
}

<div class="fade"></div>