JSFiddle - React, Tailwind, and code Playground

by spedwards

HTML

<div id="controls">
    <div id="top">
        <div id="up"></div>
    </div>
    <div id="bottom">
        <div id="left"></div>
        <div id="down"></div>
        <div id="right"></div>
    </div>
</div>

CSS

#controls {
    width: 50%;
    float: right;
    margin-top: 2em;
}

#controls > div > div {
    width: 0;
    height: 0;
    float: left;
    position: relative;
}

#top {
    width: 100%;
    margin: 0 auto;
}

#bottom {
    width: 100%;
    margin-top: 4em;
}

#up {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    
    border-bottom: 50px solid #000;
    
    left: 7.7%;
    top: 0.9em;
}

#left {
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    
    border-right: 50px solid #000;
}

#down {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    
    border-top: 50px solid #000;
    
    top: 101px;
    right: 0.1%;
}

#right {
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    
    border-left: 50px solid #000;
    
    right: 0.1%;
}