Как сделать шестиугольник в который потом вставить картинку?

Question

[KRHD]

Есть вот такая наработка:
https://jsfiddle.net/ux08j3qe/11/
но не могу вставить в неё фотографию, чтоб она не выходила за границы, была чисто в границах этого шестиугольника. Как мне это сделать

Comments

[Сергей delphinpro]

Честные полигоны на css3

Answer 1

[OGladkiy]

Вот сделай и не заморачивайся ТЫК

Answer 2

[Bondi]

зависит от необходимой поддержки, можно и clip-path использовать. Или через SVG маску css.yoksel.ru/svg-masks

Answer 3

[Ivan Bogachev]

Можно сделать несколько оберток на CSS (пример). Это немного костыльный вариант. Можно взять SVG (пример, уберите анимацию границы и останется чисто шестиугольник). Этот вариант поуниверсальнее будет.