Изображение в закругленном краеугольном шестиугольнике

Question

Я пытаюсь создать изображение внутри закругленного шестигранника с шестиугольником, где это изображение будет выступать в качестве заголовка более длинного шестиугольника для отображения информации о профиле/биографии. У шестиугольника также была бы граница.

Я исследовал, и пока я был в состоянии найти практическое руководство о том, как поместить изображение в шестиугольник и как сделать закругленный шестиугольник в углу, как он доступен здесь (это форма, которую я хочу, кроме он вращается) http://codepen.io/thebabydino/details/gFxzt Кажется, я не могу объединить эти два понятия вместе, возможно потому, что они разные.

Не мог бы кто-нибудь помочь мне, пожалуйста.

Это то, что я придумал до сих пор, чего я не хочу.

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 

Адрес my jsfiddle.

Бонусные баллы за отзывчивость.

Answer 1

Если изображение имеет фиксированный цвет фона, вы можете использовать эту ручку, это вилка шестиугольника thebabydino в:

http://codepen.io/rafaelcastrocouto/pen/mAPjRP

Если это не так, вы можете использовать SVG путь

http://codepen.io/rafaelcastrocouto/pen/vXGamL

.clip-polygon { 
 
    -webkit-clip-path: url("#hex"); 
 
    clip-path: url("#hex"); 
 
}

<div class="clip-wrap"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=30&bg=ff6347&txtclr=ffffff&txt=Image&w=140&h=140" alt="demo-clip-path" width="140" height="140" class="clip-polygon"> 
 
</div> 
 

 
<svg height="0" width="0"> 
 
    <defs> 
 
    <clipPath id="hex"> 
 
     <path d="M59 2.8867513459481a10 10 0 0 1 10 0l45.425625842204 26.226497308104a10 10 0 0 1 5 8.6602540378444l0 52.452994616207a10 10 0 0 1 -5 8.6602540378444l-45.425625842204 26.226497308104a10 10 0 0 1 -10 0l-45.425625842204 -26.226497308104a10 10 0 0 1 -5 -8.6602540378444l0 -52.452994616207a10 10 0 0 1 5 -8.6602540378444"></path> 
 
    </clipPath> 
 
    </defs> 
 
</svg>