如何为浏览器生成CMY三角形？ （CSS，SVG，Canvas？）

Question

我正在尝试为项目生成CMY三角形。我希望能够使用css，svg或canvas直接在Web上呈现它。

基于Amelia的评论，我尝试构建一个CSS（SASS）类来渲染具有线性渐变的三角形。

.triangle {
  @include background-image(
linear-gradient(to bottom, rgba(0, 252, 253, 1), rgba(0, 252, 253, 0.25) 50%, rgba(0, 252, 253, 0) 86.6%),
linear-gradient(-60deg, rgba(250, 11, 247, 1), rgba(250, 11, 247, 0.25) 50%, rgba(250, 11, 247, 0) 86.6%),
linear-gradient(60deg, rgba(252, 249, 10, 1), rgba(252, 249, 10, 0.25) 50%, rgba(252, 249, 10, 0) 86.6%)
  );

  width: 300px;
  height: 260px;
}

我无法使用通常的边框技术将此构思应用于三角形，因为它应用于形状的背景图像。此外，混合似乎是关闭的，中心点需要在重心处。我不确定如何解决这个问题。

我正在使用d3.js为三角形生成SVG路径。理想情况下，该解决方案可以应用于形状的“填充”属性。如果以另一种方式实现，我仍然可以叠加并对齐svg和解三角形。

还有一个复杂性：理想情况下，三角形不会是通常的CMY三角形。它需要更类似于下面的三角形。不是线性变化，每个参数将保持在100％直到“半径”的一半，然后在下半部分降至零。还有K参数在中间一半变为零。

理想三角形：

正常CMY三角形：