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

Question

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

Answer 1

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

div {

  width: 100px;

  height: 40px;

  position: relative;

  background: green;

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

}

div:before {

  content: "";

  position: absolute;

  right: -20px;

  bottom: 0;

  width: 0;

  height: 0;

  border-left: 20px solid green;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

}

 

<div>4.7</div>