Javascript 在下面的选项卡上创建箭头表示

我试图在单击每个按钮时创建以下结构，我想在容器顶部的按钮中心显示小三角形表示

但我不知道如何做到这一点。这将有助于提供建议和帮助

.arrow\u框{
位置：相对位置；
边框：2倍纯绿；
高度：200px；
}
.箭头框：在{
底部：100%；
左：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
边框颜色：rgba（0,0,0,0）；
边框底色：黑色；
边框宽度：15px；
左边距：-15px；
}

左边
居中
正确的

在这里，我为你拼凑了一些垃圾

按钮{
位置：相对位置；
}
按钮：焦点：前{
边框：2倍纯绿；
高度：200px；
宽度：300px；
内容：“；
位置：绝对位置；
最高：200%；
左-20%；
边框：2倍纯绿；
}
按钮：焦点：之后{
底部：-100%；
左：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
边框颜色：rgba（0,0,0,0）；
边框底色：黑色；
边框宽度：15px；
左边距：-15px；
}

左边
居中
正确的

箭头需要相对于上部元件而不是箭头框进行定位。