How to make CSS Triangle or Caret?

HTML code is :

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

CSS code is :

.up-arrow{
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-bottom-color: red;
}
.down-arrow{
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: red;
}
.left-arrow{
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: red;
}
.right-arrow{
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left-color: red;
}