How do we use css to create colour splits between sections Bulma

Question

How do I create that double colour in a section?

<section>
White Upper Section
</section>

<section>
Mid Section with the black box 
</section>

<section>
Purple Lower section
</section>

Answer 1

Bulma does not provide any out-of-the-box solution for this.

However, we can achieve this by using hero's with a little custom CSS to 'overlay' it:

.middle {
    border-radius: 10px;
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

html, body { height: 100vh; }
.purple { background: purple; }
.black { background: black; }

.middle {
    border-radius: 10px;
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

<section class="hero is-medium">
    <div class="hero-body">
        White Upper Section
    </div>
</section>

<section class="hero is-medium black middle">
    <div class="hero-body">
        Mid Section with the black box 
    </div>
</section>

<section class="hero is-medium purple">
    <div class="hero-body">
        Purple Lower section
    </div>
</section>