时间戳

首页 > 解决方案 > 创建复杂多边形

javascript - 创建复杂多边形

问题描述

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

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

在此处输入图像描述


但是，我现在需要做的是创建一个像下面这样的形状，我知道可以使用 来完成clip-path: polygon()，可能通过使用 的evenodd填充规则变得更简单polygon()。


在此处输入图像描述


问题是我不熟悉clip-path: polygon并且不擅长数学，所以我不太确定是否可以通过使用evenodd填充规则使其更简单，更不用说如何生成要绘制的顶点集了。

显然，纯 CSS 解决方案是理想的。但是，如果单独使用 CSS 是不可能的，我可以使用 JS。

有任何想法吗？

标签： javascriptcssmathpolygonclip-path

解决方案

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

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

推荐阅读