如何在 html、css、react 中制作带有内部文本的箭头？

Question

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

Answer 1

我确信还有一百种方法。这是其中之一：div {&nbsp; width: 100px;&nbsp; height: 40px;&nbsp; position: relative;&nbsp; background: green;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; color: white;}div:before {&nbsp; content: "";&nbsp; position: absolute;&nbsp; right: -20px;&nbsp; bottom: 0;&nbsp; width: 0;&nbsp; height: 0;&nbsp; border-left: 20px solid green;&nbsp; border-top: 20px solid transparent;&nbsp; border-bottom: 20px solid transparent;}&nbsp;<div>4.7</div>