创建复杂多边形

Question

我有一个公式来确定圆的直径，因此对于任何给定的矩形，圆的顶部中心和周长都与矩形的顶部中心和底部角相接触。

diameter = width * width / 4 / height + height // width and height of the rectangle

但是，我现在需要做的是创建一个如下所示的形状，我知道可以使用 clip-path: polygon() 来完成，使用 polygon() 的 evenodd 填充规则可能会变得更简单.

问题是我不熟悉clip-path: polygon 并且数学很烂，所以我不太确定使用evenodd 填充规则是否可以使它变得更简单，更不用说如何去关于生成要绘制的顶点集。

显然，纯 CSS 解决方案是理想的。但是，如果单独使用 CSS 无法做到这一点，我可以使用 JS。

有什么想法吗？

Answer 1

径向渐变可以在这里完成这项工作：

.box {
  --w:200;
  --h:100;
  --d:calc((var(--w)*var(--w))/(4*var(--h)) + var(--h));
  width:calc(var(--w)*1px);
  height:calc(var(--h)*1px);
  background:
    radial-gradient(farthest-side,blue 98%,red) 
    top/calc(var(--d)*1px) calc(var(--d)*1px);
  border:1px solid;
}

<div class="box"></div>

<div class="box" style="--w:300"></div>

<div class="box" style="--h:50"></div>