<div class="arrow left"></div>
<div class="arrow right"></div>

<div class="arrow-triangle right"></div>
<div class="arrow-triangle left"></div>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  > div {
    margin: 2vh;
  }
}
.arrow {
  position: relative;
  color: #333;
  font-family: Arial sans-serif;
  font-size: 2em;
  text-decoration: none;
  padding: 0.5em;
}

.arrow:before, .arrow:after {
  content:"";
  background: #333;
  border-radius: 0.2em;
  display: block;
  height: 0.25em;
  position: absolute;
  right: 0;
  width: 1em;
}

.arrow.left:before, .arrow.left:after {
  left: 0;
}

.arrow.left:before {
  top: 0.065em;
}

.arrow.left:after, .arrow.left:before,.arrow.right:before {
  transform: rotate(45deg);
}

arrow.left:before, .arrow.right:before, .arrow.left:after {
  top: 0.65em;
}

.arrow.left:after, .arrow.right:after {
    bottom: 0.66em;
    transform: rotate(-45deg);
}

.arrow:hover, #arrow:focus {
  color: #c00;
}

.arrow:hover:before, .arrow:hover:after,  .arrow:focus:before, .arrow:focus:after {
  background: #c00;
}

.arrow-triangle {
  position: relative;
  background-color: #333;
  text-align: left;
  margin: 1.2em;
}

.arrow-triangle:before,
.arrow-triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}

.arrow-triangle,
.arrow-triangle:before,
.arrow-triangle:after {
  width:  2em;
  height: 2em;
  border-top-right-radius: 30%;
}

.arrow-triangle.left {
  transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
}

.arrow-triangle.right {
  transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}

.arrow-triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}

.arrow-triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.