Html 三角形div内的按钮

我有以下CSS和HTML来创建“三角形”div：

。向右箭头{
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px纯绿色；
}

下一个

。向右箭头{
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px纯绿色；
位置：相对位置；
}
.向右箭头p{
位置：绝对位置；
顶部：-24px；
左：-50px；
}

下一个

您只能将此css放入p标记中：

。向右箭头{
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px纯绿色；
}
.向右箭头p{
左：20px；
位置：绝对位置；
顶部：40px；
}

下一个

实现这一点的最简单方法是相对于其原始位置定位元件

。向右箭头{
位置：相对位置；
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px纯绿色；
}
.向右箭头p{
位置：相对位置；
左：-50px；
顶部：-25px；
}

下一个

试试下面的代码

。向右箭头{
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px纯绿色；
}
.向右箭头p{
位置：绝对位置；
左：15px；
顶部：40px；
}

下一个

。向右箭头{
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px纯绿色；
}
.向右箭头p{
位置：相对位置；
左：-48px；
顶部：-26px；
}

下一个

问题在于三角形div只是边界。i、 它没有自己的宽度和高度。因此，您不能将数据放入其中。您将需要创建某种

位置：绝对
解决方案，以将文本从正常文档流中完全删除，这似乎是所提供示例中最中心的文本，谢谢