创建一个动态三角形，其高度应该改变

Question

我必须创建一个主圆div，然后点击它，它应该显示它的分支圆圈。

例如，maincircle为M1，分支圈为B1，B2，B3，B4。点击B1圈后，它应进一步显示另一个小圈......

我在这个部分苦苦挣扎，我的问题是创建一个三角形的流动路径，因为它应该是动态的，根据产生的数字圈......

我附上一张JPEG作为清关：

在这张图片中，你可以在右侧看到一些绿色的小圆圈。 我用我的代码做了所有这些，除了阴影三角形..

附加的照片是照片，用于为我的输出快照创建三角形阴影..

请告诉我解决方案

Answer 1

好。你需要的是单独使用HTML / css很难。 根据那些div-circles，你可能需要使用画布或svg，在这里你很难定位它。

就个人而言，我会考虑使用其中一个优秀的.JS svg库。 Here是一些例子，但存在更多。