Возможно ли средствами css3 нарисовать такое?

Question

[atambalasi]

Куда копать подскажите ?
Изображения
Можно и с JS?

Comments

[Тарас Шульга]

картинка битая

[atambalasi]

Тарас Шульга, сейчас исправлю

[atambalasi]

Тарас Шульга, что то не могу поставить с imgur и с компа тоже ошибка выдает

[Тарас Шульга]

Идея в том, чтобы при наведении на элемент всплывала плашка?) Или вы про всю галерею?)

[atambalasi]

Тарас Шульга, нет мне нужен такие рамки с поворотами. С галерею и ховер эффетами справлюсь. Врестку уже сделал. Но рамки нет идей

[Nuby]

есть нормальный макет? прямо интересно стало. хотел бы заморочиться, поверстать.

[atambalasi]

Nuby, макет нет. я это взял с инета.

[Nuby]

мне кажется, если уж совсем чистым css, то там можно попробовать один блок с изображением составлять из нескольких, подогнав bg-image в стык и поиграв с z-index.
остается вопрос с белым бордером. мб кривыми нарисовать и спозиционировать...

Answer 1

[hzzzzl]

гридами можно, но это придется неплохо помудохаться с разделением картинки на сетку

вот нашел пример (см Three)
https://stackoverflow.com/a/54980680

Comments

[atambalasi]

очень интересное решения. Попробую

Answer 2

[Diatomiccoder]

Сделал при помощи grid и clip-path. Но размеры колонок и строк пришлось сделать абсолютными значениями(через px)

Answer 3

[Тарас Шульга]

Ну если правильно, нужно или какой нить библиотеку поискать.Если вам нужно именно css то что-то вроде grid + flip clip ну и просто немного свободного времени.
https://bennettfeely.com/clippy/ вот пример этого свойства
Мб есть еще адекватные способы - но пока только это пришло в голову.

Comments

[atambalasi]

а что насчет например минус марджины и абсалют дивы с рамками

[Шохрух Шаймардонов]

atambalasi, костыль. Адаптивности не будет

[Шохрух Шаймардонов]

atambalasi, лучше уж тогда гриды

[atambalasi]

Шохрух Шаймардонов, js решений не подскажете

Answer 4

[Шохрух Шаймардонов]

Первое, что приходит на голову это

Comments

[runprogr]

Так это ж обычные гриды ? Это не поможет разрезать плитки по принципу соединенных кусочков пазла, как в примере автора

Answer 5

[Сергей Соколов]

Не пробовал, но стоит попробовать CSS свойство clip-path
clip-path: rectangle(...)
или mask-image и генерируемый SVG.

Каждое из изображений обрезать своей маской, позиционировать над белым фоном. Белые рамки - может, поверх положить SVG опять же и дать толщину линиям.