JSFiddle - React, Tailwind, and code Playground

HTML

<div id="start"></div>
<br />
<div id="different"></div>
<br />
<div id="exag"></div>
<br />
<div id="stretch"></div>
<br />
<div id="same"></div>
<br />
<div id="outer"><div id="inner"></div></div>

CSS

#start {
    background: green;
    border: 10px solid black;
    width: 100px;
    height: 100px;
}

#different {
    background: green;
    width: 100px;
    height: 100px;
    border-top: 10px solid red;
    border-right: 10px solid black;
    border-bottom: 10px solid blue;
    border-left: 10px solid gray;
}

#exag {
    background: green;
    width: 0px;
    height: 0px;
    border-top: 60px solid red;
    border-right: 60px solid black;
    border-bottom: 60px solid blue;
    border-left: 60px solid gray;
}

#exag {
    background: green;
    width: 0px;
    height: 0px;
    border-top: 60px solid red;
    border-right: 30px solid black;
    border-bottom: 60px solid blue;
    border-left: 30px solid gray;
}

#same {
    background: green;
    width: 0px;
    height: 0px;
    border-top: 60px solid blue;
    border-right: 30px solid blue;
    border-bottom: 60px solid blue;
    border-left: 30px solid transparent;
}


#inner {
    display: block;
    width: 0px;
    height: 0px;
    border-right: 20px solid blue;
    border-top: 40px solid blue;
    border-bottom: 40px solid blue;
    border-left: 20px solid transparent;
}

#outer {
 background-color: green;
    width: 120px;
    height: 120px;
}