JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div class="roof">
    <b class="border"><b>
    <b class="background"></b>
</div>

SCSS

body {
    background: grey;
    padding: 25px;
}

.roof {
    /* Config */
    $border-width: 10px;
    $height: 50px;
    $width: 600px;
    $color: blue;
    $background: white;
    
    $side: $width / 2;
    
    border-bottom: $border-width solid $color;
    margin: 0 auto;
    position: relative;
    width: $width;
    
    .border {
        border: {
            left: $side solid transparent;
            top: 0 solid transparent;
            right: $side solid transparent;
            bottom: $height solid $color;   
        }
        display: block;
        width: 0;
    }

    b.background {
        display: block;
    
        border: {
            left: $side solid transparent;
            top: 0 solid transparent;
            right: $side solid transparent;
            bottom: $height solid $background;   
        }
        bottom: -$border-width;
        left: 0;
        position: absolute;
        width: 0;
    }
}