見本

HTML

<div class="arrow arrow-right"></div>
<div class="arrow arrow-bottom"></div>

CSS

.arrow {
  width: 40px;
  height: 40px;
  background-color: #000;
}
.arrow.arrow-right {
  -webkit-clip-path: polygon(0 33%,57% 33%,57% 0,100% 50%,57% 100%,57% 67%,0 67%);
  clip-path: polygon(0 33%,57% 33%,57% 0,100% 50%,57% 100%,57% 67%,0 67%);
}
.arrow.arrow-bottom {
  -webkit-clip-path: polygon(33% 0,66% 0,66% 57%,100% 57%,50% 100%,0 57%,33% 57%);
  clip-path: polygon(33% 0,66% 0,66% 57%,100% 57%,50% 100%,0 57%,33% 57%);
}