JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/7543016/drawing-triangles-with-css-problems

HTML

<div class='left-arrow'>1</div>
<div  class='right-arrow'>2</div>
<div class='down-arrow'>3</div>
<div class='up-arrow'>4</div>
<div class='top-right'>5</div>
<div  class='top-left'>6</div>
<div class='bottom-right'>7</div>
<div class='bottom-left'>8</div>

CSS

.left-arrow {
border-color: transparent black;
border-style: solid;
border-width: 10px 30px 10px 0px;
height: 0px;
width: 0px;
}
.right-arrow {
border-color: transparent brown;
border-style: solid;
border-width: 10px 0px 10px 30px;
height: 0px;
width: 0px;
}
.down-arrow {
border-color: red transparent;
border-style: solid;
border-width: 30px 10px 0px 10px;
height: 0px;
width: 0px;
}
.up-arrow {
border-color: orange transparent;
border-style: solid;
border-width: 0px 30px 30px 30px;
height: 0px;
width: 0px;
}
.top-right{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent #007bff transparent transparent;
}
.top-left{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #007bff transparent transparent transparent;
}
.bottom-right{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #007bff transparent;
}
.bottom-left{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent #007bff;
}