How to fill with a semi-transparent color an area similar to the corner of a triangle?

Question

css

Do you have any ideas how to implement it like in the picture?
What I did now can be viewed online: codepen
I also duplicate the code here:

a.link(href="#")
  span tabs discription

$orange: #fe8400;
.link {
  border-left: 5px solid $orange;
  border-top: 2px solid $orange;
  border-bottom: 2px solid $orange;
  display: inline-flex;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  background-color: rgba($orange, .4);

  span {
    padding: 8px 12px;
    width: 100%;
    position: relative;
    

    &:after,
    &:before {
      content: '';
      position: absolute;
      display: inline-block;
      width: 2px;
      height: 66%;
      background-color: $orange;
      right: -7px;
      top: -3px;
      transform: rotate(-35deg);
    }
    &:before {
      transform: rotate(35deg);
      top: inherit;
      bottom: -3px;
    }
  }
}

body {
  background-color: blue;
}

Answer 1

htmlbook.ru/blog/treugolniki-cherez-css

Answer 2

www.cssarrowplease.com