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

Question

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

标签： javascripthtmlcssreactjs

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>