CSS Arrow на изображении (без использования границ)

Question

Я пытаюсь выяснить способ использования прикрепить стрелку к нижней части топового изображения, like this. Я видел несколько методов создания стрелок с CSS3, но я обнаружил, что они почти всегда используют свойство border для его достижения. Обычно что-то вроде этого:

#demo { 
    width: 100px; 
    height: 100px; 
    background-color: #ccc; 
    position: relative; 
    border: 4px solid #333; 
} 

#demo:after { 
    border-width: 9px; 
    border-left-color: #ccc; 
    top: 15px; 
} 

Я пытаюсь найти способ, чтобы создать такого рода маски форму без каких-либо иных, чем основные художественные образы. Кто-нибудь достиг этого? Если у кого-то есть какие-то идеи, это будет очень признательно.

Answer 1

Если вы ищете стрелку, которая меняет размер с изображением, то да, это можно сделать.

DEMO

HTML:

<div class='head'></div> 
<div class='arrow'></div> 

CSS:

.head { 
    margin: 0 auto; 
    width: 0; height: 0; 
    /* take into account ratio of the image but with 20% less for the height */ 
    padding: 12.5% 30%; 
    background: url(background.jpg); 
    background-size: cover; 
} 
.arrow { 
    overflow: hidden; 
    position: relative; 
    margin: -4.9% auto; 
    padding: 4.42%; /* 25% of head's padding * sqrt(2) */ 
    width: 0; 
    transform: rotate(45deg); 
    background: red; 
} 
.arrow:after { 
    position: absolute; 
    bottom: 50%; left: 50%; 
    margin: -70.71%; /* half of the width or height */ 
    width: 141.42%; height: 141.42%; /* sqrt(2)*141.42% */ 
    transform: rotate(-45deg); 
    background: url(background.jpg) 50% 100%; 
    background-size: 480% 250%; /* take into account ratio of the image */ 
    content: ''; 
}