使用CSS（包括文本）制作箭头形状

Question

我需要制作包含文字的箭头形状。我已经看到堆栈溢出的许多形状和箭头，但未能找到这种形状。有人可以帮帮我吗？

Answer 1

您可以使用pseudo elements和before

等after来获取它

我发布了下面的工作示例。

.box {
  width: 200px;
  height: 50px;
  background: tomato;
  text-align: center;
  color: #fff;
  font-size: 13px;
  position: relative;
  display: table;
}

.box span {
  display: table-cell;
  vertical-align: middle;
}

.box:before,
.box:after {
  content: '';
  position: absolute;
}

.box:after {
  border-left: 25px solid tomato;
  border-right: 25px solid transparent;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  right: -50px;
  top: 0px;
  width: 0;
  height: 0;
  display: block;
}

.box:before {
  border-left: 26px solid white;
  border-right: 26px solid transparent;
  border-top: 26px solid transparent;
  border-bottom: 26px solid transparent;
  left: 0px;
  top: -1px;
  width: 0;
  height: 0;
  display: block;
}

<div class="box">
  <span>Hello</span>
</div>