JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<div id="container"> <span id="triangle-down-red">&#9733</span>
 <span id="triangle-down-red">&#9733</span>
 <span id="triangle-down-blue">&#3868 &#3868 &#3868</span>
 <span id="triangle-down-white">&#844 &#844 &#844 &#844 &#844 &#844</span>
 <span id="triangle-bottomright"></span>
 <span id="triangle-bottomleft"></span>

</div>

CSS

body {
    background:#ddd;
}
#container {
    margin-top:100px;
}
#triangle-down-red {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 80px solid red;
    color:red;
    font-size:3em;
}
#triangle-down-blue {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 60px solid blue;
    color:blue;
    font-size:3em;
}
#triangle-down-white {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 40px solid white;
    color:white;
    font-size:3em;
}
#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 30px solid transparent;
}
#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 50px solid blue;
    border-left: 40px solid transparent;
}