html - 有没有办法在曲线渐变中添加边缘？

Question

我想实现以下图像行为。我不知道其他方式，所以这张照片是手绘的。图中的所有 Angular 都采用圆 Angular 。

我在 google 上搜索并找不到执行此操作的方法，因此我决定按以下步骤实现它:

1. 用径向渐变画一个圆
2. 用伪元素等隐藏必要部分以外的部分

div {
  width: 35vmax;
  height: 35vmax;
  background: radial-gradient(blue 20%, green 20% 40%, blue 40% 60%, green 60% 80%, blue 80%);
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

div::after,
div::before {
  content: "";
  background: white;
  position: absolute;
  top: 30%;
  left: -80%;
  width: 200%;
  height: 100%;
  transform: rotate(35deg);
}

div::before {  background: white;
left: auto;
  right: -80%;
  transform: rotate(-35deg);
}

<div></div>

但是，在编码时，我注意到了问题。我依靠猜测位置调整来重现图像。由于图像的布局具有渐变等规律性，我想用更有规律性的CSS来实现它，而不是靠猜测来调整位置。

Answer 1

对于像这样的形状，我强烈建议改用 SVG。 SVG 是一种使用 XML 语法的矢量图形格式。 SVG 可以直接嵌入到 HTML 中，或者您可以通过常规 <img> 包含 SVG 文件标签。

您可以手动创建 SVG，但这很乏味。就个人而言，我使用 InkScape ，它是免费的开源软件。然而，InkScape 保存的 SVG 文件通常没有针对网络进行优化，所以我建议通过像 SVGOMG 这样的优化器运行你的 SVG 文件。 .

示例，基于您的位图之一:

<svg xmlns="http://www.w3.org/2000/svg" width="367.6" height="197.1" viewBox="0 0 97.3 52.2"><g stroke="#000" stroke-width="1.1"><path d="M.5 26.5C.5 15 28.8 1.5 49.1.6 75.6-.6 97.2 12.2 96.7 30.8c-.3 11.7-7.2 20.6-14.3 20.8-11 .3-17.6-20-36.9-19.2-13.7.4-19.2 18.6-27.4 18.5C10 50.8.5 34.5.5 26.5z" fill="#22b14c"/><path d="M6.8 30.2C6.9 35 13 45.8 18.7 43.8c8-2.7 16.8-17.2 30.6-17.2 20.2 0 23.1 12.5 30 13.2 2.5.3 4.2-4.7 1-8a44 44 0 00-31-8.8c-9.5.7-21.7 10.3-26.3 11.2-3.3.6-8.2-2-7.7-5.3.7-4.8 22.4-10.8 34.6-11 20.3-.3 22 5.6 32 9 0 0 7 .8 6.9-3.7-.2-11-25.9-14.2-37.8-14-11.6.2-44.6 7.7-44.2 21z" fill="#00a2e8"/></g></svg>