我有一个带有分隔符的金字塔，如何在页面中使其响应

Question

我已经使用普通的HTML和CSS创建了金字塔，我成功创建了金字塔，但未能使其响应。有人可以帮我吗。

我的HTML代码

<div class="pyramid-container">

<div id="pyramid-level-3">3</div>
<div id="pyramid-level-2">2</div>
<div id="pyramid-level-1"><div class="inside-text">asdasd</div></div>
<div id="pyramid-level-0"><div class="inside-text">asd</div></div>

</div>

我的CSS看起来像这样。

.pyramid-container {
  text-align: center;
}

.inside-text {
  position: absolute;
  bottom: -40px;
}

#pyramid-level-3 {
    border-bottom: 50px solid blue;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 0px;
    margin-right:auto;
    margin-left:auto;
}

#pyramid-level-2 {
    border-bottom: 50px solid green;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 50px;
    margin-right:auto;
    margin-left:auto;
}

#pyramid-level-1 {
  position: relative;
    border-bottom: 50px solid red;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 100px;
    margin-right:auto;
    margin-left:auto;
}
#pyramid-level-0 {
  position: relative;
    border-bottom: 50px solid yellow;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 150px;
    margin-right:auto;
    margin-left:auto;
}
.pyramid-container{
  width: 200px
}

链接，让我在被卡住的地方https://jsfiddle.net/Lswz4mya/1/

注意：（每个分区的点击我也具有一些点击功能）

请仅以适当的解决方案进行答复，而不是信誉分数。