Как сделать фото со стрелочкой?

Question

[kropotkin]

Там, где оранжевым, должно быть фото. Как сделать вёрсткой так, чтобы фотка была со стрелочкой? То есть стрелочка тоже заполнена фоткой?

Answer 1

[Александр Хиренко]

Можно как-то так:
jsfiddle.net/y5qytwxt

Если нужны тени то их тоже вполне реально реализовать на CSS3, не стал заморачиваться.
Ну и решение только для одноцветного фона.

Answer 2

[Виталий Киренков]

И нафига, простите, вам этот гемор?

Реализуется то просто - вырезаете картинку с белой заливкой и вырезанным треугольником и ставите поверх фотки.
Есть вариант ещё через свг-маску, но боюсь это для вас будет слишком сложно, так что лучше делайте так.

Comments

[Анна Бакурова]

Да пусть читает.
За сегодня сложилось впечатление что люди гуглить не могут

Answer 3

[Александр Таратин]

habrahabr.ru/post/142534

Answer 4

[studioMA]

Тоже долго мучался, но пришел к одному решению...
Создаем доп DIV
.arrow-bot-green {
width: 0;
height: 0;
background: transparent;
border-left: solid 10px #fff;
border-right: solid 10px #fff;
border-top: solid 10px transparent;
border-bottom: solid 10px #fff;
position: relative;
top: -10px;
left: 20px;
}

.arrow-bot-green::before {
width: 20px;
height: 10px;
content: '';
top: -10px;
right: 10px;
background-color: #fff;
position: absolute;
}

.arrow-bot-green::after {
width: 490px; // Делаем максимальный чтобы на всё фото. А в самом диве к фото ставим overflow-x
height: 10px;
content: '';
top: -10px;
left: 10px;
background-color: #fff;
position: absolute;
}

Но, потом нашел замечательный сервис, который наглядно показывает результат
через clip-path: polygon
bennettfeely.com/clippy