<section class="tesselation">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
/* By Epogee Design, a website agency */
/* epogeedesign.com */
.fluid-type(@min-font-size: 12, @max-font-size: 16, @lower-range: 768, @upper-range: 1400) {
font-size: calc(~"@{min-font-size}px" + (~"@{max-font-size} - @{min-font-size}") * ( (100vw - ~"@{lower-range}px") / (@upper-range - @lower-range)));
@media screen and (max-width: ~"@{lower-range}px") { font-size: ~"@{min-font-size}px"; }
@media screen and (min-width: ~"@{upper-range}px"){ font-size: ~"@{max-font-size}px"; }
}
div {
width: 100em;
transform: skewX( 39deg );
padding-top: 80em;
position: relative;
position:absolute;
background-image: linear-gradient(255deg, #8aa6c9, #738caa);
box-shadow: inset 0em -3em 21em 1em fade(black,15);
&:before {
content: '';
display: block;
position: absolute;
padding-top: 80%;
z-index: 10;
width: 100%;
transform: skewX(121.7deg);
right: 65%;
background-image: linear-gradient(77deg, #aca8a4, #cfc8c2);
}
&:after {
content: '';
display: block;
position: absolute;
padding-top: 80%;
z-index: 10;
width: 100%;
transform: skewX(121.7deg) rotate(180deg) scaleX(1) translateY(100%);
right: 65%;
top: 0;
background-image: linear-gradient(323deg, #aca8a4, #cfc8c2)
}
&:nth-of-type(2) {
margin-left: -331em;
margin-top: 160.9em;
}
&:nth-of-type(3) {
margin-left: calc(-331em * 2);
margin-top: calc(160.9em * 2);
}
&:nth-of-type(4) {
margin-left: calc(-331em * 3);
margin-top: calc(160.9em * 3);
}
&:nth-of-type(5) {
margin-left: calc(-331em * 4);
margin-top: calc(160.9em * 4);
}
&:nth-of-type(6) {
margin-left: calc(-331em * -4);
margin-top: calc(160.9em * 4);
}
&:nth-of-type(7) {
margin-left: calc(-331em * -3);
margin-top: calc(160.9em * 3);
}
&:nth-of-type(8) {
margin-left: calc(-331em * -2);
margin-top: calc(160.9em * 2);
}
&:nth-of-type(9) {
margin-left: calc(-331em * -1);
margin-top: calc(160.9em * 1);
}
&:nth-of-type(10) {
margin-left: calc(-331em * -1);
margin-top: calc(160.9em * -1);
}
&:nth-of-type(11) {
margin-left: calc(-331em * 1);
margin-top: calc(160.9em * -1);
}
&:nth-of-type(12) {
margin-left: calc(-331em * 2);
margin-top: calc(160.9em * -2);
}
&:nth-of-type(13) {
margin-left: calc(-331em * 3);
margin-top: calc(160.9em * -3);
}
&:nth-of-type(14) {
margin-left: calc(-331em * 4);
margin-top: calc(160.9em * -4);
}
&:nth-of-type(15) {
margin-left: calc(-331em * 4);
margin-top: calc(160.9em * -2);
}
&:nth-of-type(16) {
margin-left: calc(-331em * 4);
margin-top: calc(160.9em * 0);
}
&:nth-of-type(17) {
margin-left: calc(-331em * -2);
margin-top: calc(160.9em * 0);
}
&:nth-of-type(18) {
margin-left: calc(-331em * -4);
margin-top: calc(160.9em * 0);
}
&:nth-of-type(19) {
margin-left: calc(-331em * -4);
margin-top: calc(160.9em * -2);
}
&:nth-of-type(20) {
margin-left: calc(-331em * -3);
margin-top: calc(160.9em * 1);
}
&:nth-of-type(21) {
margin-left: calc(-331em * -2);
margin-top: calc(160.9em * -2);
}
&:nth-of-type(22) {
margin-left: calc(-331em * -3);
margin-top: calc(160.9em * -3);
}
&:nth-of-type(23) {
margin-left: calc(-331em * -3);
margin-top: calc(160.9em * -1);
}
&:nth-of-type(24) {
margin-left: calc(-331em * 3);
margin-top: calc(160.9em * -1);
}
&:nth-of-type(25) {
margin-left: calc(-331em * 3);
margin-top: calc(160.9em * 1);
}
&:nth-of-type(26) {
margin-left: calc(-331em * 2);
margin-top: calc(160.9em * 0);
}
&:nth-of-type(27) {
margin-left: calc(-331em * 0);
margin-top: calc(160.9em * -4);
}
&:nth-of-type(28) {
margin-left: calc(-331em * 2);
margin-top: calc(160.9em * -4);
}
&:nth-of-type(29) {
margin-left: calc(-331em * -2);
margin-top: calc(160.9em * -4);
}
&:nth-of-type(30) {
margin-left: calc(-331em * -1);
margin-top: calc(160.9em * -5);
}
&:nth-of-type(31) {
margin-left: calc(-331em * 3);
margin-top: calc(160.9em * -5);
}
&:nth-of-type(32) {
margin-left: calc(-331em * 1);
margin-top: calc(160.9em * -5);
}
&:nth-of-type(33) {
margin-left: calc(-331em * 1);
margin-top: calc(160.9em * -3);
}
&:nth-of-type(34) {
margin-left: calc(-331em * -1);
margin-top: calc(160.9em * -3);
}
&:nth-of-type(35) {
margin-left: calc(-331em * 0);
margin-top: calc(160.9em * -2);
}
&:nth-of-type(36) {
margin-left: calc(-331em * 0);
margin-top: calc(160.9em * 2);
}
&:nth-of-type(37) {
margin-left: calc(-331em * -1);
margin-top: calc(160.9em * 3);
}
&:nth-of-type(38) {
margin-left: calc(-331em * 1);
margin-top: calc(160.9em * 3);
}
&:nth-of-type(39) {
margin-left: calc(-331em * 1);
margin-top: calc(160.9em * 5);
}
&:nth-of-type(40) {
margin-left: calc(-331em * -1);
margin-top: calc(160.9em * 5);
}
&:nth-of-type(41) {
margin-left: calc(-331em * 2);
margin-top: calc(160.9em * 4);
}
&:nth-of-type(42) {
margin-left: calc(-331em * -2);
margin-top: calc(160.9em * 4);
}
&:nth-of-type(43) {
margin-left: calc(-331em * 0);
margin-top: calc(160.9em * 4);
}
&:nth-of-type(44) {
margin-left: calc(-331em * -3);
margin-top: calc(160.9em * 5);
}
&:nth-of-type(45) {
margin-left: calc(-331em * -4);
margin-top: calc(160.9em * 2);
}
&:nth-of-type(46) {
margin-left: calc(-331em * -4);
margin-top: calc(160.9em * -4);
}
&:nth-of-type(47) {
margin-left: calc(-331em * -3);
margin-top: calc(160.9em * -5);
}
&:nth-of-type(48) {
margin-left: calc(-331em * 3);
margin-top: calc(160.9em * 5);
}
&:nth-of-type(49) {
margin-left: calc(-331em * 4);
margin-top: calc(160.9em * 2);
}
}
body, html {
height:100%;
min-height:100%;
overflow:hidden;
margin:0;
padding:0;
background:black;
}
section {
.fluid-type(0.5,1);
width:100%;
height:100%;
position:absolute;
max-width:1490em;
max-height:880em;
overflow:Hidden;
margin:0 auto;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background-image: linear-gradient(11deg, #394a5f, #3d4a59);
display: grid;
align-items: center;
justify-items: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.