<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.