CSS → Прозрачный треугольный вырез в элементе

Для создания вырезов в css есть свойство clip-path, позволяющее ограничить область элемента любой геометрической фигурой или полигоном. Работает во всех современных браузерах кроме IE (caniuse).

Пример треугольного выреза в активном пункте меню:

<ul class="menu">
  <li class="menu__item">Item One</li>
  <li class="menu__item menu__item--active">Item Two</li>
  <li class="menu__item">Item Three</li>
</ul>

.menu__item {
  float: left;
  margin: 0 0 0 0.1em;
  padding: 1em 1.5em;
  background: #408080;
  color: white;
}
.menu__item--active {
  background: #2E5C5C;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(50% + 10px) 100%,
    50% calc(100% - 10px),
    calc(50% - 10px) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(50% + 6px) 100%,
    50% calc(100% - 6px),
    calc(50% - 6px) 100%,
    0 100%
  );
}

Демо