513 lines
10 KiB
Plaintext
513 lines
10 KiB
Plaintext
// 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;
|
|
}
|
|
} |