Diagonal Skew Grid
Grid cells skewed with `transform: skewY()` while their content counter-skews to stay readable. The brutalist diagonal-cut layout, all done at the grid layer.
The code
<div class="gl-sk">
<div class="gl-sk-cell gl-sk-1">
<div><strong>01</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-2">
<div><strong>02</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-3">
<div><strong>03</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-4">
<div><strong>04</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-5">
<div><strong>05</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-6">
<div><strong>06</strong><em>skewY(-6deg)</em></div>
</div>
</div> <div class="gl-sk">
<div class="gl-sk-cell gl-sk-1">
<div><strong>01</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-2">
<div><strong>02</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-3">
<div><strong>03</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-4">
<div><strong>04</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-5">
<div><strong>05</strong><em>skewY(-6deg)</em></div>
</div>
<div class="gl-sk-cell gl-sk-6">
<div><strong>06</strong><em>skewY(-6deg)</em></div>
</div>
</div>.gl-sk {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 14px;
width: 100%;
min-height: 480px;
padding: 30px 22px;
background: #1a0a05;
font-family: 'JetBrains Mono', monospace;
color: #fff7ed;
box-sizing: border-box;
overflow: hidden;
}
.gl-sk-cell {
transform: skewY(-6deg);
background: linear-gradient(135deg, #ea580c, #c2410c);
border: 2px solid #1a0a05;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
min-height: 140px;
}
.gl-sk-cell > div {
transform: skewY(6deg);
text-align: center;
display: flex; flex-direction: column; gap: 6px;
}
.gl-sk-cell strong { font-size: 36px; font-weight: 800; color: #1a0a05; }
.gl-sk-cell em { font-size: 10px; color: rgba(26,10,5,0.7); font-style: normal; }
.gl-sk-1 { background: linear-gradient(135deg, #ea580c, #f97316); }
.gl-sk-2 { background: linear-gradient(135deg, #f97316, #fb923c); }
.gl-sk-3 { background: linear-gradient(135deg, #c2410c, #ea580c); }
.gl-sk-4 { background: linear-gradient(135deg, #fb923c, #fed7aa); }
.gl-sk-4 strong { color: #1a0a05; }
.gl-sk-5 { background: linear-gradient(135deg, #9a3412, #c2410c); }
.gl-sk-5 strong, .gl-sk-5 em { color: #fff7ed; }
.gl-sk-6 { background: linear-gradient(135deg, #ea580c, #c2410c); }
@media (max-width: 720px) {
.gl-sk { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
} .gl-sk {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 14px;
width: 100%;
min-height: 480px;
padding: 30px 22px;
background: #1a0a05;
font-family: 'JetBrains Mono', monospace;
color: #fff7ed;
box-sizing: border-box;
overflow: hidden;
}
.gl-sk-cell {
transform: skewY(-6deg);
background: linear-gradient(135deg, #ea580c, #c2410c);
border: 2px solid #1a0a05;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
min-height: 140px;
}
.gl-sk-cell > div {
transform: skewY(6deg);
text-align: center;
display: flex; flex-direction: column; gap: 6px;
}
.gl-sk-cell strong { font-size: 36px; font-weight: 800; color: #1a0a05; }
.gl-sk-cell em { font-size: 10px; color: rgba(26,10,5,0.7); font-style: normal; }
.gl-sk-1 { background: linear-gradient(135deg, #ea580c, #f97316); }
.gl-sk-2 { background: linear-gradient(135deg, #f97316, #fb923c); }
.gl-sk-3 { background: linear-gradient(135deg, #c2410c, #ea580c); }
.gl-sk-4 { background: linear-gradient(135deg, #fb923c, #fed7aa); }
.gl-sk-4 strong { color: #1a0a05; }
.gl-sk-5 { background: linear-gradient(135deg, #9a3412, #c2410c); }
.gl-sk-5 strong, .gl-sk-5 em { color: #fff7ed; }
.gl-sk-6 { background: linear-gradient(135deg, #ea580c, #c2410c); }
@media (max-width: 720px) {
.gl-sk { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
}