Css right arrow

by HugeHugh

HTML

<div class="arrow-con">
  <div class="arrow top">
  </div>
  <div class="arrow middle">
  </div>
  <div class="arrow bottom">
  </div>
</div>

CSS

.arrow-con {
  width: 80px;
  height: 80px;
  position: relative;
}
.arrow-con .arrow {
  position: absolute;
  top: calc(50% - 3px);
}
.arrow-con .top {
  right: 3px;
  top: calc(50% - 1.5px);
  transform: translateX(50%) rotate(45deg) translateX(-50%);
  width: 50%;
  border-bottom: 5px solid #72AFB6;
}
.arrow-con .bottom {
  right: 3px;
  top: calc(50% - 4.5px);
  transform: translateX(50%) rotate(-45deg) translateX(-50%);
  width: 50%;
  border-bottom: 5px solid #72AFB6;
}
.arrow-con .middle {
  width: calc(100% - 8px);
  border-bottom: 6px solid #72AFB6;
}