Как залить полу полупрозрачным цветом участок на подобии угла треугольника?

Question

[apexlf]

Есть идеи как можно реализовать как на картинке?
То, что сейчас сделал можно посмотреть онлайн: codepen

Так же дублирую код сюда:

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

[Александр null]

htmlbook.ru/blog/treugolniki-cherez-css

Comments

[apexlf]

Об этом я в первую очередь и подумал, вот только как тогда отдельный бордер еще давать?

[Eugene Chefranov]

apexlf, псевдоэлементом под низ подложите ещё один треугольник чуть больше размером и цветом бордера и сдвиньте на несколько пикселей (толщина бордера)

[Eugene Chefranov]

Посмотрел ваш код. Добавьте элемент after

.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);
  
  &:after {
    content:"";
    display: block;
  position: absolute; 
    right: -26px; bottom: 0px; 
    border: 16px solid transparent; 
    border-left: 10px solid rgba($orange, .4);
  }

Answer 2

[Евгений Кузовлев]

www.cssarrowplease.com