JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thebag">
  <h3>
  Shihab Mridha
  </h3>
</div>

CSS

#thebag h3{
  postion:relative;
}
#thebag{
  position: relative;
  overflow: hidden;
}
#thebag::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 30%;
  background: red;
}
#thebag::after {
  content: '';
  position: absolute;
  top: 0;
  left: 30%;
  width: 0;
  height: 0;
  border-bottom: 50px solid red;
  border-right: 70px solid transparent;
}