是否可以在CSS背景中设置类似于SVG起点和终点位置的渐变起点和终点位置？

您可以保持颜色和percetange值相同。对于SVG，您可以调整x，y值；对于CSS，您可以调整变量（角度，偏移量和除法器）

角度的公式如下：

angle = arctang(Height*(x2 - x1)/Width*|y2 - y1|)

如果y2 > y1我们再做一步angle = 180deg - angle

为了找到分频器，我们需要考虑CSS梯度的长度，该长度等于

Dc = |Width * sin(angle)| + |Height * cos(angle)|

SVG梯度的长度等于：

Ds = sqrt(Width²*(x2 - x1)² + Height²*(y2 - y1)²)

然后我们做一个简单的除法 Dc/Ds

偏移量的公式p为((Dc/2 - d)*100) / Dc，它Dc是先前定义的CSS渐变的长度，d等于：

d = (Width²*(x1-0.5)*(x1-x2)+Height²*(y1-0.5)*(y1-y2))/(sqrt(Width²*(x2-x1)²+Height²*(y2-y1)²))

这是一个互动演示

angle = arctang(Height*(x2 - x1)/Width*|y2 - y1|)

Dc = |Width * sin(angle)| + |Height * cos(angle)|

Ds = sqrt(Width²*(x2 - x1)² + Height²*(y2 - y1)²)

^{当处理正方形时，以上给出了完美的结果。对于矩形形状，仍然存在一些差异。检查公式...}

您可以将色标的所有值除以相同的系数，以减小渐变的大小并使它类似于SVG。

我使用CSS变量使其变得简单，但这不是强制性的

.rectangle {
  width: 100%;
  height: 200px;
  --s:2;
  background: 
   linear-gradient(225deg, 
    rgba(255,255,255,1) 0%, 
    rgba(250,0,0,1)   calc(27.59%/var(--s)), 
    rgba(108,22,95,1) calc(76.35%/var(--s)), 
    rgba(39,32,32,1)  calc(100%/var(--s)));
}