CSS - добавить цвет границы на полигоне клипа

Question

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

.image-center { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
} 
 
.shape { 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); 
 
    clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); 
 
} 
 
img { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="image-center"> 
 
    <div class="shape"> 
 
    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" /> 
 
    </div> 
 
</div>

Answer 1

Вы можете подделать его с несколькими падение теневых фильтров. Существует не так много поддержки, но кли путь не имеет много либо ...

.image-center { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
    -webkit-filter: drop-shadow(2px 2px 0px red) 
 
    drop-shadow(2px -2px 0px red) 
 
    drop-shadow(-2px 2px 0px red) 
 
    drop-shadow(-2px -2px 0px red); 
 
    filter: drop-shadow(2px 2px 0px red) 
 
    drop-shadow(2px -2px 0px red) 
 
    drop-shadow(-2px 2px 0px red) 
 
    drop-shadow(-2px -2px 0px red); 
 
} 
 
.shape { 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); 
 
    clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%); 
 
} 
 
img { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="image-center"> 
 
    <div class="shape"> 
 
    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" /> 
 
    </div> 
 
</div>