使用包含文本的 CSS 制作箭头形状 [重复]答案

【问题标题】：Make an arrow shape using CSS including text [duplicate]使用包含文本的 CSS 制作箭头形状 [重复]
【发布时间】：2017-07-18 13:58:27
【问题描述】：

我需要制作一个包含文字的箭头形状。我在堆栈溢出时看到了许多形状和箭头，但没能找到这种形状。谁能帮帮我？

【问题讨论】：

又添加了 2 个骗子，一个是你的 @domdom

标签： html css css-shapes

【解决方案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>

【讨论】：

怎样才能有透明的背景色？