Как убрать пробел под наклонённым дивом на мобильной версии?

Question

Помогите избавиться от пробела под наклонённым дивом на мобильной версии. Спасибо )

Тестовая страница: http://stupen.design/slanted/slanted.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta content="width=device-width, initial-scale=1" name="viewport">
       <title>Slanted test</title>
       <style>
           body {
               margin: 0;
               padding: 0;
               -ms-overflow-style: none;
           }
           body::-webkit-scrollbar {
                display: none;
           }
           .title {
               font-size: 12vh;
               margin-top: 10%;
               margin-left: 10%;
               position: absolute;
               z-index: 10;
           }
           .section1 {
               height: 100vh;
               background-color: red;
           }
           .section2 {
               height: 100vh;
               background-color: blue;
           }
           .section3 {
               height: 100vh;
               background-color: green;
           }
           .slanted {
               height: 100%;
               width: 100%;
               background-color: white;
               transform: skew(0deg, -9deg);
               transform-origin: 0% 100%;
               position: absolute;
               z-index: 5;
           }
       </style>
    </head>
    <body>
        <div class="section1">
            <h1 class="title">First slide</h1>
        </div>
        <div class="section2">
            <h1 class="title">Second slide</h1>
            <div class="slanted">
            </div>
        </div>
        <div class="section3">
            <h1 class="title">Third slide</h1>
        </div>
   </body>
</html>

Answer 1

Надо было у дива slanted задать высоту не в процентах, а в vh )))

БЛОГ НА HUSL

Как убрать пробел под наклонённым дивом на мобильной версии?

Ответы (1 шт):