Перейти к содержанию

Верстка шаблона из PSD, нужна помощь


Рекомендуемые сообщения

Всем добро дня! Подскажите пожалуйста как можно сверстать эту страницу, скрин прекрепил, а именно как сделать такую плитку из отографий где рамка косая, а фото внутри как обычно, очень нужна помощь!!)) post-48828-0-37917800-1423118152_thumb.j

Ссылка на комментарий

Создать отдельный слой - белый, например, в нем сделать ромбики (создать 1 ромб-выделение и копировать это выделение на несколько) и вырезать эти области из слоя

Подстроить под этот слой на задний план уже прямые "картинки" 

Ссылка на комментарий

На мой взгляд, если без хаков, то с помощью SVG (не картинки, а вкрапления в html; это ведь будет шаблон, так понимаю). Сами формы можно сделать произвольными (в т.ч. нужные ромбы), а обрезку фона реализовать при помощи маски. Ещё плюс: тень под картинками будет повторять именно наши формы-ромбы, а не квадратные блоки (как предлагает CSS).

 

http://www.codicode.com/art/background_text_effect_css_picture_svg_mask.aspx- здесь демонстрируется эта техника, правда фон задаётся для текста, но это не мешает использовать маски для произвольных форм.

_________________

 

 

Похоже, из этого можно сделать то, что тебе надо:
http://jsfiddle.net/kizu/bhGn4/

 

Хотя можно и так, если получится комбинировать нужные повороты.

Изменено пользователем bonfunk
Ссылка на комментарий
  • 1 год спустя...
  • 3 недели спустя...

фаст 

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

Изменено пользователем Марк12
Ссылка на комментарий

Пожалуйста, войдите, чтобы комментировать

Вы сможете оставить комментарий после входа в



Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...