How to generate CMY triangle for the browser? (CSS, SVG, Canvas?)

问题

I am trying to produce a CMY triangle for a project. I would like to be able to render it directly on the web using either css, a svg or canvas.

Based on Amelia's comment, I tried building a CSS (SASS) class to render the triangle with linear-gradients.

.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;
}

I cannot apply this idea to a triangle using the usual technique of borders as it is applied to the background-image of the shape. Also, the blending appears to be off and the center point needs to be at the barycenter. I am not sure how I could solve this.

I am using d3.js to generate a SVG path for the triangle. Ideally, the solution could be applied to the "fill" property of the shape. I still could overlay and align the svg and the solution triangle if it is implemented another way.

One more complexity: Ideally, the triangle would not be exactly the usual CMY triangle. It would need to be more similar to the triangle below. Instead of varying linearly, each parameter would stay at 100% until half the "radius", and then drop to zero in the second half. There is also the K paramater that goes to zero in the center half.

Ideal triangle:

Normal CMY triangle:

来源：https://stackoverflow.com/questions/27450249/how-to-generate-cmy-triangle-for-the-browser-css-svg-canvas

标签

css

canvas

svg

geometry