Прозрачная стрелка / треугольник с отступом

Я хотел бы сделатьпрозрачная стрелка над изображением, Этот треугольник должен иметь отступ в полупрозрачном блоке и показывать фоновое изображение.

Желаемый вывод:

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}
<div class="barShow"></div>

прозрачная стрелка CSS должен быть прозрачным без цвета.

Ответы на вопрос(3)

Ваш ответ на вопрос