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

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

Требуемый вывод:

.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>

Ответы

Ответ 1

Существует несколько способов сделать прозрачную стрелку над изображением с помощью CSS. Эти два, которые я опишу, включают псевдоэлементы, чтобы минимизировать разметку и иметь один и тот же результат. Вы также можете увидеть SVG-подход в конце этого ответа:

Прозрачный эффект на черной части вокруг стрелки сделан с rgba() цветами, которые обеспечивают прозрачность. Но вы можете использовать непрозрачность на псевдоэлементах, если хотите.

1. SkewX()

Вы можете использовать свойство CSS3 skewX() на двух псевдоэлементах, чтобы сделать прозрачную стрелку. Основным преимуществом этого подхода является то, что прозрачная стрелка может быть отзывчивой, но также позволяет поместить границу на черную фигуру и вокруг трассы.

Чувствительность формы выполняется с помощью свойства padding-bottom для поддержания его соотношения сторон (этот метод описан здесь).

DEMO

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 3%;
  background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before,
.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  padding-bottom: inherit;
  background-color: inherit;
}
.arrow:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.arrow:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

<div class="wrap">
  <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
  <div class="arrow"></div>
</div>

Ответ 2

Простой подход

Используйте псевдоэлемент с box-shadow и transform: rotate();
Добавить overflow: hidden; в главный div.

Фрагмент:

body {
  margin: 0;
  padding: 0;
  background: url(http://i.imgur.com/EinPKO3.jpg);
  background-size: cover;
}
div {
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}
div:before {
  position: absolute;
  top: -50px;
  left: calc(50% - 35px);
  content: "";
  height: 50px;
  width: 50px;
  background: transparent;
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.6);
}

<div></div>

Ответ 3

Вот решение, использующее CSS клип-путь, который не переполняет оболочку.

.wrap {
  position:relative;
  width:480px;
  height:270px;
  background-image:url(http://placehold.it/480x270);
}

.wrap:after {
  content:"";
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50px;
  background-color:rgba(0, 0, 0, 0.7);
  -webkit-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
  -moz-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
  clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
}

<div class="wrap"></div>