sbot/ui/less/com/hexagon.less

// courtesy of csshexagon.com

.hexagon-30 {
  position: relative;
  width: 30px; 
  height: 17.32px;
  margin: 8.66px 0;
  background-size: auto 34.6410px;
  background-position: center;

  .hexTop,
  .hexBottom {
    position: absolute;
    z-index: 1;
    width: 21.21px;
    height: 21.21px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 4.39px;

    /* Keeps borders smooth in webkit */
    backface-visibility: hidden;
  }

  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
    content: "";
    position: absolute;
    width: 30.0000px;
    height: 17.320508075688775px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-8.6603px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-8.6603px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-8.6603px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
  }

  .hexTop {
    top: -10.6066px;
  }

  .hexTop:after {
    background-position: center top;
  }

  .hexBottom {
    bottom: -10.6066px;
  }

  .hexBottom:after {
    background-position: center bottom;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30.0000px;
    height: 17.3205px;
    z-index: 2;
    background: inherit;
  }
}

.hexagon-45 {
  position: relative;
  width: 45px; 
  height: 25.98px;
  margin: 12.99px 0;
  background-size: auto 51.9615px;
  background-position: center;

  .hexTop,
  .hexBottom {
    position: absolute;
    z-index: 1;
    width: 31.82px;
    height: 31.82px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 6.59px;

    /* Keeps borders smooth in webkit */
    backface-visibility: hidden;
  }

  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
    content: "";
    position: absolute;
    width: 45.0000px;
    height: 25.98076211353316px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-12.9904px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-12.9904px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-12.9904px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
  }

  .hexTop {
    top: -15.9099px;
  }

  .hexTop:after {
    background-position: center top;
  }

  .hexBottom {
    bottom: -15.9099px;
  }

  .hexBottom:after {
    background-position: center bottom;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0.0000px;
    left: 0;
    width: 45.0000px;
    height: 25.9808px;
    z-index: 2;
    background: inherit;
  }
}

.hexagon-60 {
  position: relative;
  width: 60px; 
  height: 34.64px;
  margin: 17.32px 0;
  background-size: auto 69.2820px;
  background-position: center;

  .hexTop,
  .hexBottom {
    position: absolute;
    z-index: 1;
    width: 42.43px;
    height: 42.43px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 8.79px;

    /* Keeps borders smooth in webkit */
    backface-visibility: hidden;
  }

  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
    content: "";
    position: absolute;
    width: 60.0000px;
    height: 34.64101615137755px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-17.3205px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-17.3205px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-17.3205px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
  }

  .hexTop {
    top: -21.2132px;
  }

  .hexTop:after {
    background-position: center top;
  }

  .hexBottom {
    bottom: -21.2132px;
  }

  .hexBottom:after {
    background-position: center bottom;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0.0000px;
    left: 0;
    width: 60.0000px;
    height: 34.6410px;
    z-index: 2;
    background: inherit;
  }
}

.hexagon-80 {
  position: relative;
  width: 81px; // was 80, 81 seems to look better
  height: 46.19px;
  margin: 23.09px 0;
  background-image: url(http://csshexagon.com/img/meow.jpg);
  background-size: auto 92.3760px;
  background-position: center;

  .hexTop,
  .hexBottom {
    position: absolute;
    z-index: 1;
    width: 56.57px;
    height: 56.57px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 11.72px;
  }

  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
    content: "";
    position: absolute;
    width: 80.0000px;
    height: 46.188021535170066px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-23.0940px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-23.0940px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-23.0940px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;

    /* Keeps borders smooth in webkit */
    backface-visibility: hidden;
  }

  .hexTop {
    top: -28.2843px;
  }

  .hexTop:after {
    background-position: center top;
  }

  .hexBottom {
    bottom: -28.2843px;
  }

  .hexBottom:after {
    background-position: center bottom;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0.0000px;
    left: 0;
    width: 80.0000px;
    height: 46.1880px;
    z-index: 2;
    background: inherit;
  }
}

.hexagon-200 {
  position: relative;
  width: 200px; 
  height: 115.47px;
  margin: 57.74px 0;
  background-image: url(http://csshexagon.com/img/meow.jpg);
  background-size: auto 230.9401px;
  background-position: center;

  .hexTop,
  .hexBottom {
    position: absolute;
    z-index: 1;
    width: 141.42px;
    height: 141.42px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 29.29px;
  }

  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
    content: "";
    position: absolute;
    width: 200.0000px;
    height: 115.47005383792516px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-57.7350px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-57.7350px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-57.7350px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;

    /* Keeps borders smooth in webkit */
    backface-visibility: hidden;
  }

  .hexTop {
    top: -70.7107px;
  }

  .hexTop:after {
    background-position: center top;
  }

  .hexBottom {
    bottom: -70.7107px;
  }

  .hexBottom:after {
    background-position: center bottom;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0.0000px;
    left: 0;
    width: 200.0000px;
    height: 115.4701px;
    z-index: 2;
    background: inherit;
  }
}

.hexagon-275 {
  position: relative;
  width: 275px; 
  height: 158.77px;
  margin: 79.39px 0;
  background-size: auto 317.5426px;
  background-position: center;


  &:after {
    content: "";
    position: absolute;
    top: 0.0000px;
    left: 0;
    width: 275.0000px;
    height: 158.7713px;
    z-index: 2;
    background: inherit;
  }

  .hexTop,
  .hexBottom {
    position: absolute;
    z-index: 1;
    width: 194.45px;
    height: 194.45px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 40.27px;

    /* Keeps borders smooth in webkit */
    backface-visibility: hidden;
  }

  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
    content: "";
    position: absolute;
    width: 275.0000px;
    height: 158.7713240271471px;
    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-79.3857px);
    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-79.3857px);
    transform:          rotate(45deg) scaleY(1.7321) translateY(-79.3857px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
  }

  .hexTop {
    top: -98.0272px; // tweaked value, original: -97.2272px;
  }

  .hexTop:after {
    background-position: center top;
  }

  .hexBottom {
    bottom: -97.0272px; //tweaked value, original: -97.2272px;
  }

  .hexBottom:after {
    background-position: center bottom;
  }
}

.user-hexagrid {
  display: inline-block;
  margin: 35px 0;

  > div {
    .user-hexagon {
      display: inline-block;
      opacity: 0.75;
      &:hover {
        opacity: 1;
      }
    }
  }
  
}

.user-hexagrid-30 {
  .user-hexagrid;

  > div {
    &:nth-child(even) {
      margin-left: 15px;
    }
    .user-hexagon {
      margin: -3px 1px -9px 0;
    }
  }
}

.user-hexagrid-60 {
  .user-hexagrid;

  > div {
    &:nth-child(even) {
      margin-left: 30px;
    }
    .user-hexagon {
      margin: -11px 1px -11px 0;
    }
  }
}

.user-hexagrid-80 {
  .user-hexagrid;

  > div {
    &:nth-child(even) {
      margin-left: 41px;
    }
    .user-hexagon {
      margin: -13px 1px -12px 1px;
    }
  }

  .hovercard {
    margin-top: 10px;
  }
}

.user-hexagrid-200 {
  .user-hexagrid;
  margin: 70px 0;

  > div {
    &:nth-child(even) {
      margin-left: 101px;
    }
    .user-hexagon {
      margin: -30px 2px -29px 0;
    }
  }

  .hovercard {
    margin-top: 10px;
  }
}

.user-hexagrid-275 {
  .user-hexagrid;
  margin: 70px 0;

  > div {
    &:nth-child(even) {
      margin-left: 138px;
    }
    .user-hexagon {
      margin: -41px 1px -41px 0;
    }
  }

  .hovercard {
    margin-top: 10px;
  }
}