我正在尝试为一个项目生成一个 CMY 三角形。我希望能够使用 css、svg 或 canvas 直接在网络上渲染它。
根据 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 三角形：
