Javascript 如何在html、css和react中创建带有内部文本的箭头？

我试着用position:relative做这个，但我想要一个自适应的站点，所以它不适合我。在我尝试制作svg图像后，它不能包含文本。我怎样才能做到这一点呢？

我相信还有上百种方法。这是其中之一：

div{ 宽度：100px； 高度：40px； 位置：相对位置； 背景：绿色； 显示器：flex； 证明内容：中心； 对齐项目：居中； 颜色：白色； } 部门：以前{ 内容：； 位置：绝对位置； 右：-20px； 底部：0； 宽度：0； 身高：0； 左边框：20px纯绿； 边框顶部：20px实心透明； 边框底部：20px实心透明； } 4.7