JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <a href="#about" class="page-scroll">
    <div class='octagonWrap'>
      <div class='octagon'>
      </div>
    </div>
  </a>
</div>

CSS

.octagonWrap {
    width:200px;
    height:200px;
    float: left;
    position: relative;
    overflow: hidden;
}
.octagon {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    transform: rotate(120deg);
    background: transparent;
    border: 1px solid black;
}
.octagon:before {
    position: absolute;
    /* There needs to be a negative value here to cancel
     * out the width of the border. It's currently -3px,
     * but if the border were 5px, then it'd be -5px.
     */
    top: -1px; right: -1px; bottom: -1px; left: -1px;
    transform: rotate(120deg);
    content: '';
    border: inherit;
}

.octagon:hover,
.octagon:focus {
    outline: 0;
    color: red;
    background: rgba(167,167,167,.1);
}