Как правильно сверстать такие блоки?

Question

[Rheinmetall]

Собственно это и весь вопрос. Особенно меня интересуют эти странные соты, которые еще и должны то ли увеличиваться на клик, то ли открывать фото в полный размер.

Заранее спасибо!

Answer 1

[zoozag]

Через clip-path или mask-image можно

Comments

[Rheinmetall]

Спасибо! Как вариант. Никогда правда не пользовался, но буду пробовать. А насчет сот есть идеи? В смысле как их сгруппировать?

[zoozag]

Rheinmetall, Я ими тоже толком не пользовался. Это как раз для сот.

Вот это примерно шестиугольник.

-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%);

[Андрей Федоров]

zoozag А еще менее кроссбраузерный способ можете предложить?

[Rheinmetall]

zoozag, Спасибо большое за подсказку. Благодаря тебе нагуглил генератор clip-path

[zoozag]

Андрей Федоров, Если есть получше варианты готов выслушать.
Вроде как только IE и Opera mini не поддерживают

[Moskus]

Самый надежный способ - оторвать руки дизайнеру.

[zoozag]

Rheinmetall, Пример без clip-path

Answer 2

[t00rt]

Через div блоки с png картинками, + чутка позиционирования и z-index=)