Косое пустое место внизу страницы

#html #css

Вопрос:

Я пытаюсь создать сайт с угловым градиентом, и он оставляет пустое пространство внизу страницы, которое невозможно заполнить. Я нашел здесь несколько похожих вопросов, но ни одно из решений не сработало для меня.

 html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: skewY(-10deg);
}

#app {
  width: 100%;
  height: 100%;
}

#gradient {
  height: 60%;
  transform: skewY(10deg);
} 
 <div id="gradient">
  <div id="main">
    <div id="app"></div>
  </div>
</div> 

Фотография номера

Комментарии:

1. Div градиента не имеет определенного цвета? В любом случае, почему вы используете асимметричный, когда вы можете определить угловые градиенты, например, с помощью «фоновое изображение: линейный градиент(180 градусов, красный, желтый)»;

2. Градиент сделан в javascript, потому что я хотел, чтобы он был анимированным.

3. переполнение:скрыто в #градиент?