JSFiddle - React, Tailwind, and code Playground

by James Butler

HTML

<div class="bottom">
    <div class="triangle"></div>
</div>

CSS

.bottom {
    height:300px;
    width:300px;
    position:relative;
    overflow:hidden;
}
.triangle{
    position:absolute;
    top:0;
    left:0;
    height:0;
    width:0px;
    border-top:200px solid red;
    border-left:100px solid transparent;
    border-right:200px solid transparent;
border-radius: 0 65% 0 0;    
}

.triangle:before{
    content:"S";
    position:absolute;
    font-family: 'arial';
    font-size:50em;
    top:-0.78em;
    left:-0.60em;
    color:white;
}
.triangle:after{
    content:"S";
    position:absolute;
    font-family: 'arial';
    font-size:60em;
    top:-0.85em;
    left:-0.45em;
    color:white
}