Как обрезать область вокруг div в форме половины шестиуголника?

Question

[butnothero]

Здравствуйте. Не могу понять как сверстать вот такую панель навигации:



Нужно чтобы при переходе на каждую страницу был вырез в такой форме.

Comments

[Алексей Абрамов]

Сделай бордер вокруг иконки пару пикселей цветом фона?

[Антон Антон]

Лично я бы сделал инлайн-svg вместо всей конструкции

[butnothero]

Алексей Абрамов, Нужно чтобы обрезанная область была прозрачна

[Алексей Абрамов]

butnothero, тогда через svg

[butnothero]

Алексей Абрамов, А каким образом? Можно ли пример на codepen ?

Answer 1

[Иван К]

Сделать у синей плашки фон из SVG, а иконку с домиком поверх нее

Comments

[butnothero]

А как обрезать область вокруг шестиугольника, в котором находится домик, чтобы обрезанная область стала прозрачной? Можно ли какой-нибудь пример? Все что знал и мог уже испробовал

[Иван К]

В верстке все блоки будут прямоугольные, так что работать надо с фоном - сделай свг с нужным вырезом, блок с домиком - фон в виде 6угольника, ну и абсолютное позиционирование.