Як зробити фото зі стрілочкою

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

І нафіга, вибачте, вам цей гемор?

Реалізується просто - вирізаєте картинку з білою заливкою і вирізаним трикутником і ставите поверх фотки. Є варіант ще через свг-маску, але боюся це для вас буде надто складно, так що краще робіть так.

Теж довго мучився, але дійшов одного рішення. Створюємо додатковий 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; >

---