18 CSS Divider Collections 02 / 18
Brutalist Dividers
Three raw breaks that arrive with force — a slab slamming in from the left, a hatch band wiping into view, and color blocks popping up in sequence.
The code
<div class="div-brutalist-surface">
<p class="div-brutalist-text">CONTEMPORARY ART FOUNDATION — ANNUAL REPORT 2024. Total acquisitions: 847. Public programs attended: 12,400.</p>
<div class="div-brutalist-v1" role="separator"></div>
<p class="div-brutalist-text">The question of what constitutes public space has never been more contested — streets, plazas, parks, all subject to restriction.</p>
<div class="div-brutalist-v2" role="separator"></div>
<p class="div-brutalist-text">Architecture is political. Every building encodes a value system — a vision of who belongs and who does not.</p>
<div class="div-brutalist-v3" role="separator">
<span></span><span></span><span></span><span></span><span></span>
</div>
<p class="div-brutalist-text">WE BUILD. WE DEMOLISH. WE BUILD AGAIN. The city is its own argument — perpetually unresolved.</p>
</div> <div class="div-brutalist-surface">
<p class="div-brutalist-text">CONTEMPORARY ART FOUNDATION — ANNUAL REPORT 2024. Total acquisitions: 847. Public programs attended: 12,400.</p>
<div class="div-brutalist-v1" role="separator"></div>
<p class="div-brutalist-text">The question of what constitutes public space has never been more contested — streets, plazas, parks, all subject to restriction.</p>
<div class="div-brutalist-v2" role="separator"></div>
<p class="div-brutalist-text">Architecture is political. Every building encodes a value system — a vision of who belongs and who does not.</p>
<div class="div-brutalist-v3" role="separator">
<span></span><span></span><span></span><span></span><span></span>
</div>
<p class="div-brutalist-text">WE BUILD. WE DEMOLISH. WE BUILD AGAIN. The city is its own argument — perpetually unresolved.</p>
</div>@keyframes div-bru-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-bru-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
@keyframes div-bru-pop { 0% { transform: scaleY(0); opacity: 0; } 65% { transform: scaleY(1.15); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.div-brutalist-surface {
background: #ffffff;
padding: 36px 40px;
border-radius: 12px;
}
.div-brutalist-text {
font-family: "Courier New", Courier, monospace;
font-size: 13px;
line-height: 1.78;
color: #111111;
margin: 0;
}
/* v1 — solid slab slams in */
.div-brutalist-v1 {
position: relative;
height: 18px;
margin: 32px 0;
background: #111111;
animation: div-bru-slam 0.52s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-brutalist-v1::after {
content: '///';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-family: "Courier New", monospace;
font-size: 9px;
letter-spacing: 5px;
color: #ffffff;
}
/* v2 — diagonal hatch wipes in */
.div-brutalist-v2 {
position: relative;
height: 22px;
margin: 32px 0;
animation: div-bru-wipe 0.72s cubic-bezier(.16,1,.3,1) 0.22s both;
}
.div-brutalist-v2::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-60deg,
#111111 0, #111111 3px,
transparent 3px, transparent 11px
);
}
.div-brutalist-v2::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
#ffffff 0, transparent 40px,
transparent calc(100% - 40px), #ffffff 100%
);
}
/* v3 — color blocks pop up in sequence */
.div-brutalist-v3 {
display: flex;
gap: 2px;
height: 10px;
margin: 32px 0;
}
.div-brutalist-v3 span {
transform-origin: bottom;
animation: div-bru-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-brutalist-v3 span:nth-child(1) { flex: 4; background: #111111; animation-delay: 0.26s; }
.div-brutalist-v3 span:nth-child(2) { flex: 1; background: #e6351f; animation-delay: 0.36s; }
.div-brutalist-v3 span:nth-child(3) { flex: 2; background: #111111; animation-delay: 0.42s; }
.div-brutalist-v3 span:nth-child(4) { flex: 1; background: #f2c12e; animation-delay: 0.48s; }
.div-brutalist-v3 span:nth-child(5) { flex: 4; background: #111111; animation-delay: 0.53s; }
@media (prefers-reduced-motion: reduce) {
.div-brutalist-v1, .div-brutalist-v2, .div-brutalist-v3 span { animation: none; }
} @keyframes div-bru-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-bru-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
@keyframes div-bru-pop { 0% { transform: scaleY(0); opacity: 0; } 65% { transform: scaleY(1.15); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.div-brutalist-surface {
background: #ffffff;
padding: 36px 40px;
border-radius: 12px;
}
.div-brutalist-text {
font-family: "Courier New", Courier, monospace;
font-size: 13px;
line-height: 1.78;
color: #111111;
margin: 0;
}
/* v1 — solid slab slams in */
.div-brutalist-v1 {
position: relative;
height: 18px;
margin: 32px 0;
background: #111111;
animation: div-bru-slam 0.52s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-brutalist-v1::after {
content: '///';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-family: "Courier New", monospace;
font-size: 9px;
letter-spacing: 5px;
color: #ffffff;
}
/* v2 — diagonal hatch wipes in */
.div-brutalist-v2 {
position: relative;
height: 22px;
margin: 32px 0;
animation: div-bru-wipe 0.72s cubic-bezier(.16,1,.3,1) 0.22s both;
}
.div-brutalist-v2::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-60deg,
#111111 0, #111111 3px,
transparent 3px, transparent 11px
);
}
.div-brutalist-v2::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
#ffffff 0, transparent 40px,
transparent calc(100% - 40px), #ffffff 100%
);
}
/* v3 — color blocks pop up in sequence */
.div-brutalist-v3 {
display: flex;
gap: 2px;
height: 10px;
margin: 32px 0;
}
.div-brutalist-v3 span {
transform-origin: bottom;
animation: div-bru-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-brutalist-v3 span:nth-child(1) { flex: 4; background: #111111; animation-delay: 0.26s; }
.div-brutalist-v3 span:nth-child(2) { flex: 1; background: #e6351f; animation-delay: 0.36s; }
.div-brutalist-v3 span:nth-child(3) { flex: 2; background: #111111; animation-delay: 0.42s; }
.div-brutalist-v3 span:nth-child(4) { flex: 1; background: #f2c12e; animation-delay: 0.48s; }
.div-brutalist-v3 span:nth-child(5) { flex: 4; background: #111111; animation-delay: 0.53s; }
@media (prefers-reduced-motion: reduce) {
.div-brutalist-v1, .div-brutalist-v2, .div-brutalist-v3 span { animation: none; }
}