What is the different way to do heading underline stylish?

.container {
  width: 100%;
  padding: 50px;
  display: block;
}

h2 {
  font-size: 35px;
  line-height: 1.2;
  margin: 0;
  width: 500px;
}

.heading-border {
  position: relative;
  background: url('https://i.ibb.co/PM2s0mj/green-shape.png');
  background-size: 100% 8px;
  background-position: bottom;
  background-repeat: no-repeat;
}

.heading-border:before {
  content: '';
  background: #fff;
  height: 13px;
  width: 12px;
  display: inline-block;
  margin: 0px 0px -8px -6px;
  transform: rotate(-45deg);
}

.heading-border:after {
  content: '';
  background: #fff;
  height: 13px;
  width: 12px;
  display: inline-block;
  margin: 0px -6px -17px 0;
  transform: rotate(-45deg);
}

<div class="container"><h2>This is heading <span class='heading-border'>this is stylish heading line</span></h2></div>