Как сделать косой блок?

Тема в разделе "Верстка", создана пользователем DynamoFan, 6 мар 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. DynamoFan

    DynamoFan Постоялец

    Регистр.:
    15 июл 2011
    Сообщения:
    78
    Симпатии:
    54
  2. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Под спойлером код.
    HTML:
    <div id="element">
    <div id="element1">
    Код:
    #element:before {
      content: "";
      position: absolute;
      width: 200%;
      height: 90%;
      top: 20%;
      left: -30%;
      z-index: 1;
      background: #fff ;
      opacity: 0.8;
      -webkit-transform: rotate(5deg);
      -moz-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      -o-transform: rotate(5deg);
      transform: rotate(5deg);
    }
    #element1:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      z-index: 0;
      background: url(http://imgg.marketgid.com/2152/2152988_vb.jpg) 0 0 repeat;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }


    В работе тут:
    http://codepen.io/anon/pen/wGoxJ
    http://codepen.io/Solus_Rex/pen/lDuhk
    Только оптимизируйте.

    upd. ссылку поставил на свой акк. чтоб фотка не слетела.
     
    Последнее редактирование: 7 мар 2014
    DynamoFan нравится это.
  3. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    169
    Симпатии:
    81
    Можно с помощью элемента map задавать произвольные фигуры.
     
    DynamoFan нравится это.
  4. DynamoFan

    DynamoFan Постоялец

    Регистр.:
    15 июл 2011
    Сообщения:
    78
    Симпатии:
    54
    что то не работает. сплошной белый блок. блок что под спойлом вставлял
     
  5. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    У меня всё работает. Вы на codepen.io по ссылке заходили?
    Вот:
    http://codepen.io/Solus_Rex/pen/lDuhk
    и вот на тестовом уже в html:
    http://xx0.ru/asd/transform1.html

    Если белый экран, то думаю, что Вы не верно задали путь к картинке. Посмотрите в html-ке по второй ссылке, как путь задан.
     
    DynamoFan нравится это.