Javascript 使用css制作八角形的复杂形状

我想创建一个八角形，里面有一个内八角形，内八角形将被分成几个部分，每个部分形成一个新的形状，其中有名字

八角形的边缘也会有树。感谢您的帮助

我们所要做的就是用下面的css创建一个八角形

#octagon {
  width: 100px;
  height: 100px;
  background: green;
  position: relative;
}
#octagon:before {
  content: "";
  width: 100px;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid green;
  border-left: 29px solid #eee;
  border-right: 29px solid #eee;
}
#octagon:after {
  content: "";
  width: 100px;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid green;
  border-left: 29px solid #eee;
  border-right: 29px solid #eee;
}

---

为了清晰起见，请参见图

要在父图形内定位其他图形，可以使用如下绝对定位：

.div1{
位置：相对位置；
背景：蓝色；
高度：200px；宽度：200px；
剪辑路径：多边形（30%0%、70%0%、100%30%、100%70%、70%100%、30%100%、0%70%、0%30%）；
}
.其他形状{
位置：绝对位置；
左：50px；上：50px；
宽度：100px；高度：100px；背景：红色；
}

请在问题中加入您的HTML以及您为实现目标而编写的JS/css。不是纯css，不。我的意思是，您可能可以，但是使用js会容易很多。请您提供更多关于如何使用js实现这一点的见解尝试使用它添加树，您可以使用pseudo elements:：before和：：after与SVG一起使用