semi transparent hex shaped div

I've scrapped some code for the hex shaped div and it works pretty well. The problem is now I need it to be semi-transparent, but the :after and :before tags overlap and that causes inconsistency in transparency.

.hexagon {
  position: relative;
  width: 290px;
  height: 173.21px;
  margin: 86.60px 0;
  border-left: solid 5px #333333;
  border-right: solid 5px #333333;
  background-color: rgb(102, 204, 34, 0.7);
}

.hexagon:before,
.hexagon:after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: rgb(102, 204, 34, 0.7);
  left: 38.9340px;
}

.hexagon:before {
  top: -106.0660px;
  border-top: solid 7.0711px #333333;
  border-right: solid 7.0711px #333333;
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: solid 7.0711px #333333;
  border-left: solid 7.0711px #333333;
}

<div class="hexagon">
  <span style="font-size: 11px">1</span>
  <span>2     </span>
</div>

what would be the best way to make it work?