JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slope">
    Hello
</div>
<div class="triangle"></div>

CSS

.slope{
    width:500px;
    height:100px;
    background:#0093f7;
    text-align:center;
    font-size:26px;
    color:#fff;
    vertical-align:middle;
    float: left;
    line-height: 100px;
}

.triangle {
    float: left;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: #0093f7 transparent transparent transparent;
}