Создание прозрачной стрелки над изображением в CSS3

Чтобы нарисовать прозрачный/перевернутый треугольник в CSS3

вы можете использовать технику треугольника CSS3 и создать перевернутую форму, комбинируя :before и :after псевдообъекты, каждый для рисования одной части треугольника.

Вы можете сделать что-то вроде этого:

.image {
    position:relative;
    height:200px;
    width:340px;
    background:orange;
}
.image:before, .image:after {
    content:'';
    position:absolute;
    width:0;
    border-left:20px solid white;
    left:0;
}
.image:before {
    top:0;
    height:20px;
    border-bottom:16px solid transparent;
}
.image:after {
    top:36px;
    bottom:0;
    border-top:16px solid transparent;
}

вот иллюстративный jsfiddle

Для примера я просто использовал плоский оранжевый фон ... но вы можете изменить его на изображение, и, надеюсь, вы получите то, что хотели =)

Изменить: и более окончательный результат может выглядеть примерно так: это

Я думаю, вам нужно что-то вроде этого:

.arrow {
    bottom: -25px; 
    left: 30px; 
    width: 40px;
    height: 40px;
    position: absolute;
    overflow: hidden;
}

.arrow:after {
    content: ' ';
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    position: absolute;
    top: -19px;
    left: 3px;
    background: #999;
    border: 5px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}