Arrows in css

All type of arrows using css only

by vaheed akhtar

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

CSS

.one {
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid lightgrey;
}

.two {
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 30px solid lightgrey;
}

.three {
  height: 0;
  width: 0;
  border-top: 30px solid lightgrey;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}