JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Now isnt that nice?</h3>
<div class='fancy-triangle'></div>

CSS

h3{
    margin: 10px;
    text-align: center;
}
.small-container{
    max-width: 10%;
    float: left;
}
.medium-container{
    max-width: 30%;
    float: left;
}
.large-container{
    float: left;
    max-width: 50%;
}
.fancy-triangle {
    width: 50%;
    height: 0;
    padding-left:50%;
    padding-bottom: 50%;
    overflow: hidden;
}
.fancy-triangle:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #4679BD;
}