Make an arrow shape using CSS including text

Question

I need to make an arrow shape including text. I have seen many shapes and arrows on stack overflow but failed to find out this kind of shape. Can anyone help me please?

Answer 1

You can get it by using pseudo elements like before and after

I posted and working example below.

.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>