zlato Опубликовано 5 февраля, 2015 Жалоба Поделиться Опубликовано 5 февраля, 2015 Всем добро дня! Подскажите пожалуйста как можно сверстать эту страницу, скрин прекрепил, а именно как сделать такую плитку из отографий где рамка косая, а фото внутри как обычно, очень нужна помощь!!)) Цитата Ссылка на комментарий
Сотовый 03 Опубликовано 5 февраля, 2015 Жалоба Поделиться Опубликовано 5 февраля, 2015 Создать отдельный слой - белый, например, в нем сделать ромбики (создать 1 ромб-выделение и копировать это выделение на несколько) и вырезать эти области из слояПодстроить под этот слой на задний план уже прямые "картинки" Цитата Ссылка на комментарий
ArtyomK Опубликовано 5 февраля, 2015 Жалоба Поделиться Опубликовано 5 февраля, 2015 Похоже, из этого можно сделать то, что тебе надо:http://jsfiddle.net/kizu/bhGn4/PS: CSS не знаю, знаю только подход к гуглу. Цитата Ссылка на комментарий
zlato Опубликовано 5 февраля, 2015 Автор Жалоба Поделиться Опубликовано 5 февраля, 2015 спасибо сейчас попробую, отпишусь о том как все прошло) Цитата Ссылка на комментарий
bonfunk Опубликовано 5 февраля, 2015 Жалоба Поделиться Опубликовано 5 февраля, 2015 (изменено) На мой взгляд, если без хаков, то с помощью SVG (не картинки, а вкрапления в html; это ведь будет шаблон, так понимаю). Сами формы можно сделать произвольными (в т.ч. нужные ромбы), а обрезку фона реализовать при помощи маски. Ещё плюс: тень под картинками будет повторять именно наши формы-ромбы, а не квадратные блоки (как предлагает CSS). http://www.codicode.com/art/background_text_effect_css_picture_svg_mask.aspx- здесь демонстрируется эта техника, правда фон задаётся для текста, но это не мешает использовать маски для произвольных форм._________________ Похоже, из этого можно сделать то, что тебе надо:http://jsfiddle.net/kizu/bhGn4/ Хотя можно и так, если получится комбинировать нужные повороты. Изменено 6 февраля, 2015 пользователем bonfunk Цитата Ссылка на комментарий
robin2368 Опубликовано 25 ноября, 2016 Жалоба Поделиться Опубликовано 25 ноября, 2016 @zlato Откуда у тебя данный макет и еще в PSD? Цитата Ссылка на комментарий
Александр Покацкий Опубликовано 2 декабря, 2016 Жалоба Поделиться Опубликовано 2 декабря, 2016 На здоровье http://htmlbook.ru/css/transform Цитата Ссылка на комментарий
Марк12 Опубликовано 20 декабря, 2016 Жалоба Поделиться Опубликовано 20 декабря, 2016 (изменено) фаст html : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>1234</title> </head> <body> <div class="block"> <img src="путь к своей картинке" alt="jpgd"> </div> </body> </html> css: .block{ width: 200px; height: 100px; transform: skewX(-15deg); margin: 10px; overflow: hidden; border: 1px solid #ccc; } .block img{ transform: skewX(15deg); } Изменено 20 декабря, 2016 пользователем Марк12 Цитата Ссылка на комментарий
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.