body {
  background: linear-gradient(45deg, blue, red, green);
  height: 100vh;
}
*{&, &::before, &::after{box-sizing: border-box;} }
.hex {
  height: 50px;
  width: 87px;// height * sin 60
  border-left: 1px solid white;
  border-right: 1px solid white;
  margin: 100px;
  display: flex;
  color: #fff;
  font-size: 30px;
  position: relative;
  &__content { margin: auto; }
  
  &::before, &::after {
    content: '';
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-left: 1px solid white;
    border-right: 1px solid white;
    position: absolute;
    left: -1px;
    top: -1px;
  }
  &::before {
    transform: rotate(60deg);
  }
  &::after {
    transform: rotate(-60deg);
  }
}