JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sd-topheadline"></div>
<div class="sd-leftheadline"></div>
<div class="sd-rightheadline"></div>

CSS

.sd-topheadline {
    position: relative;
    display: block;
    background-color: #2C3E50;
    float: left;
    width: 100%;
    height: 30px;
    z-index: 499;
}
.sd-leftheadline {
    position: relative;
    display: block;
    background-color: #EA5C38;
    float: left;
    width: 50%;
    height: 120px;
    z-index: 499;
}
.sd-rightheadline {
    position: relative;
    display: block;
    background-color: #1A2530;
    float: right;
    width: 50%;
    height: 120px;
    z-index: 499;
}
.sd-rightheadline:after {
    content:"";
    top: 119px;
    left: 0;
    position: relative;
    display: inline;
    width: 0px;
    height: 0px;
    border-top: 120px solid #EA5C38;
    border-right: 123px solid transparent;
    z-index: 9999;
}