Просто интерес к вёрстке! Как бы вы это сделали?

Question

[Максим]

Сам вопрос просто интерес , вырос это вопрос от сюда и смогу или нет, конечно косые блоки я хотел сверстать на SVG , но делов много и решил на изображениях , сделал но как добавить для perspective блоков боковой бордюр ?(см скрин)

это что то типа мокапа - не могу додуматься как реализовать ..
это то что я сделал : https://codepen.io/Geyan/pen/GmMWBq?editors=0100 косые не подгружаются почему то
скрин с локалки -

Comments

[Сергей delphinpro]

Не проще будет вэб-гэ-эл'ем отрисовать?

[Сергей delphinpro]

Модульную картинку, имею ввиду. Вообще ее просто имеджем вставить следовало, но у вас, видимо, спортивный интерес.

[Максим]

Сергей: я такой плюшкой ещё не пользовался ...
а как это делается ? просто азы в трёх словах

[Сергей delphinpro]

Максим Ленский: В трех словах вряд ли, но в принципе для подобной задачки ничего сложного. Гляньте любой урок для начинающих о работе с примитивами.

[Максим]

Сергей: да , у мну просто получится или нет , всё хотелось бы на css - я в youtube видел sorax он слайдер делал - по этому типу ..но вот только background он как автоматом выставил .. я же подбирал что бы совпало

[Сергей delphinpro]

Максим Ленский: ну тут реально с css больше геморроя будет. если выйдет вообще. Оптимально js/webGL и то только из интереса. А так - png.

[Максим]

Сергей: я почти согласен , если бы ещё хотя бы какой не будь минимум но в этом духе увидить бы

[Антон Мудренок]

Сергей:
а почему webGL? мы же тут видим только одно ребро.
3D Трансформации они одинаковы везде, что в css, что в webGL.
Можно сделать. Геморно, конечно, но можно.

[Антон Мудренок]

Максим Ленский: Минимум вы можете нарисовать кубик в 3D и понять как такие штуки работают:
codepen.io/search/pens/?limit=all&page=1&q=3d+cube
codepen.io/mrspok407/pen/aZvXZJ

Answer 1

[gleendo]

WebGL или просто картинки вставлять с псевдообъемом. Если проект статический, крутить, вертеть не нужно, то картинки вполне сойдут за нормальное решение.

Comments

[Максим]

а как с фоном который один на все пять быть ? и тем более что они выглядят как одно изображение

[gleendo]

Максим Ленский: ну так одним изображением и вставляйте. При чем тут фон вообще...

[gleendo]

Максим Ленский: https://jsfiddle.net/9de6pawq/

[Максим]

iamevg_: хм... ты это сам сделал ? или нашёл в сети ? конечно изображением лучше и удобнее .. в gimp сделать реально это с любым изображением

[gleendo]

Максим Ленский: это обычная картинка с прозрачным фоном. Подобное сделать в PS не составит труда

[Максим]

iamevg_: да я знаю что делать её в 10 минут вложишься .. а ели это автоматизировать надо будет ? к примеру из админки делать подобное .. опять же просто интерес .. разово я понял что PS или GIMP и дело в шляпе .. а если автоматизировать ?

[alvvi]

Максим Ленский: тогда WebGL, вам вполне полный ответ дали ведь.

Answer 2

[Negwereth]

Если статика, то ::before и transform на оба ваши дома.