Див блок не прямоугольной формы.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Rudaki29rus, 26 сен 2016.

  1. Rudaki29rus

    Rudaki29rus

    Регистрация:
    8 авг 2016
    Сообщения:
    12
    Симпатии:
    1
    Здравствуйте, ни как не могу реализовать вот такие дивы:
    [​IMG]
    [​IMG]
    [​IMG]
     
    Lasted edited by : 26 сен 2016
  2. YoYo

    YoYo

    Регистрация:
    20 июл 2016
    Сообщения:
    120
    Симпатии:
    27
  3. Rudaki29rus

    Rudaki29rus

    Регистрация:
    8 авг 2016
    Сообщения:
    12
    Симпатии:
    1
    Решение вроде подходит, но... на рисунке у верхнего блока идет картинка у границы... как вот её туда вставить.
    Вот так должно быть:
    [​IMG]
    --- Добавлено, 26 сен 2016 ---
    И еще. Тут для бордера необходимо конкретную ширину указывать, а мне надо что бы при любом разрешении на всю страницу растягивалось.
     
  4. Rudaki29rus

    Rudaki29rus

    Регистрация:
    8 авг 2016
    Сообщения:
    12
    Симпатии:
    1
    Решил вопрос.
     
  5. YoYo

    YoYo

    Регистрация:
    20 июл 2016
    Сообщения:
    120
    Симпатии:
    27
    Напишите решение, интересно!
    Вдруг кому пригодится?
     
  6. Rudaki29rus

    Rudaki29rus

    Регистрация:
    8 авг 2016
    Сообщения:
    12
    Симпатии:
    1
    Думал что решил:

    Код:
    .sec1{
        width: 100%;
        height: 540px;
        background: #5fc18b;
        position: relative;
    }
    
    .sec1::after{
        content: '';
        position: absolute;
        background: #5fc18b;
        min-width: 100%;
        height: 330px;
        bottom: -205px;
        -moz-transform: skewY(-10deg);
        overflow: hidden;
     }
    
    .sec1::before{
        content: '';
        position: absolute;
        background: #308355;
        min-width: 100%;
        height: 30px;
        bottom: -165px;
        -moz-transform:  skewY(-9deg);
        overflow: hidden;
    }
    
    .sec2{
        width: 100%;
        height: 794px;
        z-index: -1;
        background: #44a36f;
    }
    Это подходит, если нет необходимости расположить sec1:after позади sec1, а мне надо.. вот эту проблему пока не решил.
    --- Добавлено, 29 сен 2016 ---
    Решил:
    HTML:
    <div class="sec1">
        <div class="sec1_1"></div>
        <div class="sec1_2"></div>
        <div class="sec2"></div>
    </div>
    Код:
    .sec1{
        width: 100%;
        height: 540px;
        background: url("../img/sec1_img.png") no-repeat 40% 75px #5fc18b;
        position: relative;
    }
    
    .sec1_1{
        content: '';
        position: absolute;
        background: #5fc18b;
        min-width: 100%;
        height: 410px;
        bottom: -206px;
        -moz-transform: skewY(-12deg);
        overflow: hidden;
        z-index: -1;
     }
    
    .sec1_2{
        content: '';
        position: absolute;
        background: #308355;
        min-width: 100%;
        height: 30px;
        bottom: -218px;
        -moz-transform:  skewY(-11deg);
        overflow: hidden;
        z-index: -2;
    }
    
    .sec2{
        position: absolute;
        width: 100%;
        height: 794px;
        z-index: -3;
        background: #44a36f;
        bottom: -794px;
    }
     
    YoYo нравится это.
  7. Rudaki29rus

    Rudaki29rus

    Регистрация:
    8 авг 2016
    Сообщения:
    12
    Симпатии:
    1
    Сделал немного по другому... так кажется лучше.
    HTML:
    <div class="sec">
        <div class="sec1"></div>
        <div class="sec2"></div>
        <div class="sec3"></div>
    Код:
    .sec{
        width: 100%;
        height: 1350px;
        background: url("../img/sec1_img.png") no-repeat 40% 75px #44a36f;
        position: relative;
        text-align: center;
    }
    
    .sec1{
        position: absolute;
        top: 0;
        width: 100%;
        height: 550px;
        background: #5fc18b;
        z-index: 999;
    
    }
    
    .sec2{
        position: absolute;
        background: #5fc18b;
        width: 100%;
        height: 370px;
        bottom: 600px;
        -moz-transform: skewY(-10deg);
        overflow: hidden;
        z-index: 2;
    
     }
    
    .sec3{
        position: absolute;
        background: #308355;
        min-width: 100%;
        height: 24px;
        bottom: 595px;
        -moz-transform:  skewY(-9.5deg);
        overflow: hidden;
        z-index: 1;
    }
     
  8. V.Didkovsky

    V.Didkovsky

    Регистрация:
    19 ноя 2016
    Сообщения:
    2
    Симпатии:
    0
    http://html5book.ru/css3-transform Куча разных видов блоков на css (в плане как сделать), на будущее может пригодиться и не только тебе)