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

Question

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

例如maincircle是M1和分支界是B1，B2，B3，B4。点击B1圈就会进一步显示另一个小圆圈......

我在这里挣扎在这里，我的问题是创建一个三角形的流路，因为它应该根据生成的数字圈来动态变化。 ..

我附加JPEG你过关：

在这张图片中，你可以看到在右边一些绿色的小圆圈。 我已经做了所有这些有不同之处在于阴影三角形我的代码..

附图片是photoshoped用于创建三角树荫我输出的快照..

请让我用代码解决方案

Answer 1

好吧。你需要的仅仅是HTML/CSS。 根据这些div-circles，你可能需要使用canvas或svg，而在这里你很难找到正确的位置。

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