Thin Navigation Arrow [concept] (CSS only)

by Konstantin Rouda

HTML

<div class="container">
  <div class="arrow">
  </div>
</div>

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(253, 254, 253);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}



/*Actual Style*/
.container {
  position: relative;
  width: 300px; height: 300px;
  margin: 10rem auto 0;
  background: rgba(10, 10, 10, .8);
}

.arrow {
  position: absolute;
  top: 40%; right: -4%;
  width: 50px; height: 50px;
  //border: 1px solid blue;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 45%; left: 8%;
  width: 100%; height: 4px;
  transform-origin: 0 0;
  background: -webkit-linear-gradient(top left, #8ec63f 0%, transparent 66%);
}

.arrow::before {
  transform: rotate(40deg);
}

.arrow::after {
  transform: rotate(-40deg);
}