Как добавить волнистый раздел без изображения? - PullRequest
Новая
       97

Как добавить волнистый раздел без изображения?

0 голосов
/ 12 июля 2020

Итак, я пытаюсь сделать первую полосу. Но сначала я хотел бы разделить страницу на 2 раздела, а на самом деле 3. Так что, скажем, цвет A, а в div будет анимация. Второй просто объединит две страницы вместе, например, ниже. Третий div будет цвета B с анимацией. Вот пример, который я нарисовал на краске: enter image description here

Now here is what I currently have: enter image description here Perhaps it would be a good idea to include some code with this question. I am using handlebars so I will only add the part that determines the sizing of the three divs.

HTML:

CSS: 

.first {
    height: 100%;
    width: 40%;
    display: flex;
    flex-flow: column;
    padding: 5px;
    float: left;
}
.second {
    height: 100%;
    width: 20%;
    display: flex;
    flex-flow: column;
    padding: 5px;
    float: left;
    overflow: hidden;
}
.third {
    height: 100%;
    width: 40%;
    display: flex;
    flex-flow: column;
    padding: 5px;
    float: left;
    background-color: #161717
}

Я пробовал использовать изображения, SVG, и с этими параметрами было трудно заставить их растянуть до полного размера div всегда. Это, и я хотел бы go с чем-то более чистым css и html, а не с файлами. Я хотел бы получить несколько советов о том, что мне нужно сделать, чтобы раздел выглядел хорошо (или даже существовал).

...