Как сделать стрелочку с вырезом?

Question

[notequal21]

Нужно сделать табы с такой стрелочкой, которая будет указывать на активный пункт


Сейчас остановился на таком варианте:
Сделал линию через div внутрь закинул svg стрелочку и под нее добавил белый фон, чтобы сделать вырез. Но получилось так себе. Нужно сделать чтобы вырез был прозрачный
Сейчас так

Answer 1

[Сергей Сергей]

Это так, наводка на мысли.

<style>
body{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sk{
  width: 20vw;
  height: 10vh;
  margin: 2mm calc( 5vh - 0.35mm );
  /*border: 1mm solid #333;*/
}
.sk.left{
  /*border-width: 0 1.41mm 1mm 0;*/
  box-shadow: 1.41mm 1mm #333;
  transform: skewX( -45deg );
}
.sk.right{
  /*border-width: 0  0 1mm 1.41mm;*/
  box-shadow: -1.41mm 1mm #333;
  transform: skewX( 45deg );
}
</style>
<div class="sk left"></div>
<div class="sk right"></div>

Только есть недостаток, кончик уголка отсекается.