Draw triangle and under shape usinh HTML, CSS

Question

I am working upon creating a HTML page that will have text written under shape, see pic for the reference. To draw this shape, I am using following:

#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 100%;
}

#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  transform: skew(0deg, 6deg);
}

#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  transform: skew(0deg, -6deg);
}

<div style="width: 100%">
  <div id="chevron">
  </div>
</div>

However, the shape is pretty different than what I am trying to draw.

Here is the desired result:

Answer 1

You could use clip-path this website is great to get the hang of it

in your case you would need something like this :

clip-path: polygon(100% 0, 100% 15%, 50% 25%, 0 15%, 0 0);