JSFiddle - React, Tailwind, and code Playground

HTML

<section class="step step-1">
    <h1>Step 1</h1>
    <div class="bar">
        <div class="c c1"></div>
        <div class="c c2"></div>
    </div>
    
    <div class="tooltip">
        Let's get rid of the blue bottom-border since we don't really need it.
    </div>
</section>



<section class="step step-2">
    <h1>Step 2</h1>
    <div class="bar">
        <div class="c c1"></div>
        <div class="c c2"></div>
    </div>
    
    <div class="tooltip">
        If we make the green and yellow transparent we get the illusion of a triangle shaped cutout.
    </div>
</section>

<section class="step step-3">
    <h1>Step 3</h1>
    <div class="bar">
        <div class="c c1"></div>
        <div class="c c2"></div>
    </div>
    
    <div class="tooltip">
        Almost done. But all we want is the middle cutouts. We dont want those in the extremitys.
    </div>
</section>

<section class="step step-4">
    <h1>Step 4</h1>
    <div class="bar">
        <div class="c c1"></div>
        <div class="c c2"></div>
    </div>
    
    <div class="tooltip">
       We've got our piece. Now It's a matter of appending it to the box. 
    </div>
</section>

<section class="step step-5">
    <h1>Step 5</h1>
    <div class="box">
        <div class="content">
            Here's some text for this awesome box!
        </div>
        <div class="bar">
            <div class="c c1"></div>
            <div class="c c2"></div>
        </div>
    </div>
    
    <div class="tooltip">
       It's finished. However some improvements could be done to reduce our html sufficiently. 
    </div>
</section>

<section class="step final-step">
    <h1>Final Step (Improved Version of Step 5)</h1>
    
    <!-- all the html we need -->
    <div class="box">
        Here's some text for this awesome box.
    </div>
    
</section>

CSS

body {
    background: lightblue;
}

/*STEP 1*/
.step-1 .bar .c {
    /*so the border width isn't 
    added above the 50% width and instead
    becomes part of it.*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    width: 50%;
    float: left;
    border: 20px solid red;
    border-bottom-color: blue;
    border-left-color: green;
    border-right-color: yellow;
}

/*STEP 2*/
.step-2 .bar .c {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    border-top: 20px solid red;
    border-left: 20px solid green;
    border-right: 20px solid yellow;
}

/*STEP 3*/
.step-3 .bar .c {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    border-top: 20px solid red;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

/*STEP 4*/
.step-4 .bar .c {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    border-top: 20px solid red;
}

.step-4 .bar .c1 {
    border-right: 20px solid transparent;
}

.step-4 .bar .c2 {
    border-left: 20px solid transparent;
}


/*STEP 5*/
.step-5 .box .content {
    min-height: 80px; /*optional*/
    padding: 5px; /*optional*/
    background: red; /*matches .bars border-color*/
}

.step-5 .bar .c {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    border-top: 20px solid red;
}

.step-5 .bar .c1 {
    border-right: 20px solid transparent;
}

.step-5 .bar .c2 {
    border-left: 20px solid transparent;
}



/*FINAL STEP: IMPROVED VERSION OF STEP 5*/
/*
Two things:
1) our 'bar' is now created with pseudo elements
2) we place the bar over the '.box's transparent bottom border
*/

.final-step .box {
    position: relative;
    min-height: 80px; /*optional*/
    padding: 5px; /*optional*/
    border-bottom: 25px solid transparent; /*matches border-top width*/
    background: red;
    /*background-clip ensures .box's...