JSFiddle - React, Tailwind, and code Playground

by undkonsorten

HTML

<div id="nr1"></div>
<div id="nr2" class="arrows"></div>
<div id="nr3" class="arrows"></div>
<div id="nr4" class="arrows"></div>
<div id="nr5" class="arrows"></div>



<p style="clear:left;margin:50px 0 0 10px;">More information at <a href="http://blog.undkonsorten.com/css-dreiecke-mit-css-border/" target="_blank">blog.undkonsorten.com</a></p>

CSS

/* CODE BY www.UNDKONSORTEN.com */

div {
    border-color:DarkGreen Orange Yellow GreenYellow;
    border-style:solid;
    margin:15px;
    float:left;    
}
#nr1 {
    height:50px;
    width:50px;
    border-width:20px;     
}
.arrows {
    height: 0;
    width: 0;
    border-width:45px;
}
#nr3 {
    border-right-width:0;
}
#nr4 {
    border-right-width:0;
    border-color:transparent transparent transparent GreenYellow;
}
#nr5 {
    border-top-width:0;
    border-color:transparent transparent Yellow transparent;
    margin-top:60px;
}