I wanted to make a format divided into two parts with the shape of curves, only the background visual, with different colors and without affecting the position of any element.

EXAMPLE

I wanted to do something like this, I remember having seen something similar using linear or radial gradient but I can't find it, it's just for the background without applying any kind of division or border

CodePudding user response：

I think you can make something like wave background but just rotate it.

<section>

      <!-- content here -->

      <div ></div>

    </section>

section {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    min-height: 400px;

    padding-top: 100px;

    background: #3c31dd;

}



.curve {

    position: absolute;

    height: 250px;

    width: 100%;

    bottom: 0;

    text-align: center;

}



.curve::before {

    content: '';

    display: block;

    position: absolute;

    border-radius: 100% 50%;

    width: 55%;

    height: 100%;

    transform: translate(85%, 60%);

    background-color: hsl(216, 21%, 16%);

}



.curve::after {

    content: '';

    display: block;

    position: absolute;

    border-radius: 100% 50%;

    width: 55%;

    height: 100%;

    background-color: #3c31dd;

    transform: translate(-4%, 40%);

    z-index: -1;

}