CSS 화살표 / CSS Arrows

 

<div class="css-arrow-left"></div>
<div class="css-arrow-up"></div>
<div class="css-arrow-right"></div>
<div class="css-arrow-down"></div>

 

.css-arrow-left { border-color: transparent #5558da transparent transparent; border-style: solid; border-width: 10px 20px 10px 0; float: left; height: 0; margin: 0 10px; width: 0;}
.css-arrow-up { border-color: transparent transparent #5558da; border-style: solid; border-width: 0 10px 20px; float: left; height: 0; margin: 0 10px; width: 0;}
.css-arrow-right { border-color: transparent transparent transparent #5558da; border-style: solid; border-width: 10px 0 10px 20px; float: left; height: 0; margin: 0 10px; width: 0;}
.css-arrow-down { border-color: #5558da transparent transparent; border-style: solid; border-width: 20px 10px 0; float: left; height: 0; margin: 0 10px; width: 0;}