Как сверстать шестикутники чтоб фон у них юила одна картинка?

Question

[Alex Kizyma]

Надо сверстать два шестикутники з общим фоно вот как тут на картинке

Answer 1

[nakree]

Взять картинку из макета. Она должна быть уже порезана. Если нет, то порезать самому в фотошопе.
Затем:
bennettfeely.com/clippy
или
csshexagon.com
или
https://habrahabr.ru/post/126207/

Comments

[IIIu6ko]

У clip-path поддержка фиговая, пока не советую его использовать.
https://caniuse.com/#search=clip-path

Answer 2

[Максим]

шестикутники чтоб фон у них юила одна картинка

это на каком языке ?

Comments

[Konstantin Kochurov]

Суржик с ошибками

Answer 3

[Stalker_RED]

clip-path же
https://jsfiddle.net/s9p0tcbb/

Answer 4

[Alexander Litvinenko]

Это три прямоугольника на самом деле, один див и еще два псевдоелементами - они повернуты что был треугольник сверху и снизу, при необходимести еще и трансформированы. Фон отпозицыонирован, на самом деле там три картинки.

Comments

[Максим]

почему не SVG ?

[Anton Filippov]

нет у вас азарта разработчика)
одной картинкой можно

[IIIu6ko]

Похоже на троллинг :D
Ух кому-то повезёт за таким "профессионалом" вёрстку дорабатывать.

[Alexander Litvinenko]

Александр Шибков, это самый кроссбраузерный способ, попробуйте угодить заказчику со стареньким маком.

[IIIu6ko]

Alexander Litvinenko, Проще взять готовую png'шку тогда, логично?

[Alexander Litvinenko]

Александр Шибков, это при условии что картинка не динамическая

[IIIu6ko]

Alexander Litvinenko, Походу я неправильно понял. Ты про такой способ имел ввиду?
https://www.queness.com/resources/html/css3-hexago...

[Alexander Litvinenko]

Александр Шибков, да, только еще два дива не обязательно делать в хтмл, можно обойтись :before и :after, у меня где-то даже миксин был, на теореме Пифагора считает нужные модификации исходя из высоты и шырины

[IIIu6ko]

Alexander Litvinenko, Извиняюсь, сглупил.
Если не затруднит, скинь пожалуйста миксин. А ещё лучше на codepen примерчик бы.

[Alexander Litvinenko]

Александр Шибков, сейчас если чесно затруднит, дедлайн, если позже напомнишь - найду.

[IIIu6ko]

Alexander Litvinenko, Хорошо, спасибо, напомню.