使用 CSS 制作箭头形状，包括文字

Question

我需要制作一个包含文字的箭头形状。我在 stack overflow 上看到过很多形状和箭头，但没有找到这种形状。谁能帮帮我？

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>

使用 CSS 制作箭头形状，包括文字

Make an arrow shape using CSS including text

html

css

css-shapes