<main class="grid">
<div class="invgrid"></div>
<div class="invgrid2"></div>
<div class="t1cy">
<p>"TO SAY A <span class="t2cr">GRID</span> IS LIMITING IS</p>
<p>TO SAY THAT LANGUAGE IS LIMITING,</p>
<p>OR TYPOGRAPHY IS LIMITING."</p>
</div>
<div class="black rectangle r1cb"></div>
<div class="yellow rectangle2 r2cy"></div>
<div class="yellow rectangle r3cy"></div>
<div class="black triangle2 tr1cb"></div>
<div class="black triangle tr2cy"></div>
<div class="black c1cb"></div>
<div class="red c2cr"></div>
<div class="red triangle3 tr4cr"></div>
<div class="triangle4 tr3cy"></div>
</main>
/* ORIGINAL POSTER BY TOM DAVIE */
/* http://studiotwentysix2.com/poster/grid.html */
/* inspired by Victoria Ninni Bergquist (https://codepen.io/vicbergquist) */
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
font-size: 8px;
line-height: 1.8;
letter-spacing: 0.5px;
}
body * {
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.grid .invgrid .invgrid2 {
height: calc(595px / 1.15);
width: calc(420px / 1.15);
}
}
.grid {
display: grid;
height: 595px;
width: 420px;
background: #dcb124;
grid-template-columns: repeat(4, 25%);
grid-template-rows: 6% 18% repeat(4, 19%);
}
.invgrid {
height: 595px;
width: 420px;
background: transparent;
border: 10px solid white;
margin-left: -115px;
margin-top: -10px;
z-index: 999;
}
.invgrid2 {
height: 595px;
width: 420px;
background: transparent;
border: 100px solid black;
margin-left: -310px;
margin-top: -100px;
z-index: 1;
}
.triangle {
clip-path: polygon(0 0, 0% 100%, 100% 100%);
clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.triangle2 {
width: 0;
height: 0;
border-bottom: 70px solid #dcb124;
border-left: 70px solid transparent;
border-top: 1px solid #000000;
z-index: 6;
}
.triangle3 {
width: 0;
height: 0;
border-bottom: 70px solid #000000;
border-left: 70px solid transparent;
}
.triangle4 {
width: 0;
height: 0;
border-bottom: 70px solid #dcb124;
border-left: 70px solid transparent;
}
.rectangle {
transform: rotate(90deg);
width: 270px;
height: 82px;
}
.rectangle2 {
transform: rotate(225deg);
width: 5px;
height: 500px;
}
.red {
background: #c05402;
}
.black {
background: #000000;
}
.yellow {
background: #dcb124;
}
.c1cb {
grid-row: 3;
margin: -6px;
height: 380%;
width: 380%;
border-radius: 50%;
margin-top: -50px;
margin-left: -120px;
}
.c2cr {
grid-row: 3;
margin: -73px;
margin-top: 3px;
height: 290%;
width: 290%;
border-radius: 50%;
margin-left: -178px;
}
.tr1cb {
grid-row: 2;
transform: scale(1, -1);
transform: scale(1, -1);
margin-top: -21px;
margin-bottom: 16px;
margin-left: -105px;
transform: rotate(180deg);
}
.tr2cy {
grid-row: 3;
width: 350px;
height: 350px;
transform: scale(1, -1);
transform: scale(1, -1);
margin-top: -58px;
margin-bottom: 16px;
margin-left: 27px;
}
.tr3cy {
grid-row: 3;
transform: scale(1, -1);
transform: scale(1, -1);
margin-top: 228px;
margin-left: -292px;
transform: rotate(0deg);
}
.tr4cr {
grid-row: 4;
transform: scale(1, -1);
transform: scale(1, -1);
margin-top: 40px;
margin-left: -105px;
z-index: 5;
transform: rotate(180deg);
}
.r1cb {
grid-row: 1;
margin-left: -95px;
margin-top: 179px;
z-index: 2;
}
.r2cy {
grid-row: 4;
margin: -235px 0 0 192px;
z-index: 99;
}
.r3cy {
grid-row: 2;
margin-left: -148px;
margin-top: 250px;
}
.t1cy {
grid-row: 5;
z-index: 3;
margin: -240px -90px 0 48px;
color: #dcb124;
display: inline-block;
font-family: 'Khand', sans-serif;
}
.t2cr {
color: #c05402;
display: inline;
font-family: 'Khand', sans-serif;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.