使用React构建一个静态网站。

说明

我想在网站的页面上添加一个视觉效果，如下所示。

视觉效果

我正在尝试构建一个矩形背景。如图中阴影区域所示，将从该矩形中切割一些三角形(切割前，三角形的至少两个顶点必须在边缘上(。

然后我希望剪切出的三角形在页面中随机浮动。

我希望中间内容部分的背景(也是一个矩形(不被剪切(即只剪切最外面的填充部分(。

一些尝试

我尝试过在剪切后随机生成多边形的顶点坐标和剪切三角形的顶点坐标，并使用css剪辑路径和动画显示它们。但我还没有想出一个可用的顶点生成算法。

您肯定会尝试clip-path生成器，但可能会发现它在不同的屏幕上无法正常工作。没有有效的顶点生成算法。另一种选择是自己做一些随机数学。如果您觉得多边形在一个屏幕上很好看，但在另一个屏幕却很乱，请尝试使用media查询。