Retro Dividers
Three nostalgic breaks — a starburst whose rays draw outward, a slamming two-tone diner rule, and a perforated ticket-stub edge.
Retro Dividers the 12th of 18 designs in the 18 CSS Divider Collections collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="div-retro-surface">
<p class="div-retro-text">The diner on Route 9 had been open since 1952 and showed no signs of reconsidering. The menu hadn't changed in thirty years.</p>
<div class="div-retro-v1" role="separator">
<svg viewBox="0 0 476 44" fill="none" aria-hidden="true">
<line class="div-retro-fl" x1="221" y1="22" x2="0" y2="22" stroke="#d4601a" stroke-width="1"/>
<line class="div-retro-fr" x1="255" y1="22" x2="476" y2="22" stroke="#d4601a" stroke-width="1"/>
<g class="div-retro-rays" stroke="#d4601a" stroke-width="1.5">
<line x1="238" y1="13" x2="238" y2="3"/>
<line x1="241.4" y1="13.7" x2="245.3" y2="4.4"/>
<line x1="244.4" y1="15.6" x2="251.3" y2="8.7"/>
<line x1="246.3" y1="18.6" x2="255.6" y2="14.7"/>
<line x1="247" y1="22" x2="257" y2="22"/>
<line x1="246.3" y1="25.4" x2="255.6" y2="29.3"/>
<line x1="244.4" y1="28.4" x2="251.3" y2="35.3"/>
<line x1="241.4" y1="30.3" x2="245.3" y2="39.6"/>
<line x1="238" y1="31" x2="238" y2="41"/>
<line x1="234.6" y1="30.3" x2="230.7" y2="39.6"/>
<line x1="231.6" y1="28.4" x2="224.7" y2="35.3"/>
<line x1="229.7" y1="25.4" x2="220.4" y2="29.3"/>
<line x1="229" y1="22" x2="219" y2="22"/>
<line x1="229.7" y1="18.6" x2="220.4" y2="14.7"/>
<line x1="231.6" y1="15.6" x2="224.7" y2="8.7"/>
<line x1="234.6" y1="13.7" x2="230.7" y2="4.4"/>
</g>
<circle class="div-retro-circ" cx="238" cy="22" r="5" fill="#d4601a"/>
</svg>
</div>
<p class="div-retro-text">Neon signs don't flicker by accident — the gas inside reacts to alternating current with a rhythm that feels almost biological.</p>
<div class="div-retro-v2" role="separator">
<span class="div-retro-t"></span>
<span class="div-retro-b"></span>
</div>
<p class="div-retro-text">The booth was upholstered in vinyl the colour of oxblood — a colour whose name nobody used but everyone recognized.</p>
<div class="div-retro-v3" role="separator"></div>
<p class="div-retro-text">The jukebox held 200 selections. He had played B-7 every visit since 1971 without wondering why.</p>
</div> @keyframes div-rt-ray { to { stroke-dashoffset: 0; } }
@keyframes div-rt-dot { from { transform: scale(0); } 65% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes div-rt-draw { to { stroke-dashoffset: 0; } }
@keyframes div-rt-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-rt-fade { from { opacity: 0; } to { opacity: 1; } }
.div-retro-surface {
background: #231509;
padding: 36px 40px;
border-radius: 12px;
}
.div-retro-text {
font-family: "Courier New", Courier, monospace;
font-size: 12.5px;
line-height: 1.82;
letter-spacing: 0.03em;
color: #e0c87a;
margin: 0;
}
/* v1 — starburst rays draw outward */
.div-retro-v1 { margin: 32px 0; }
.div-retro-v1 svg { display: block; width: 100%; height: 44px; overflow: visible; }
.div-retro-rays line {
stroke-dasharray: 11;
stroke-dashoffset: 11;
animation: div-rt-ray 0.22s ease both;
}
.div-retro-rays line:nth-child(1) { animation-delay: 0.08s; }
.div-retro-rays line:nth-child(2) { animation-delay: 0.12s; }
.div-retro-rays line:nth-child(3) { animation-delay: 0.17s; }
.div-retro-rays line:nth-child(4) { animation-delay: 0.21s; }
.div-retro-rays line:nth-child(5) { animation-delay: 0.26s; }
.div-retro-rays line:nth-child(6) { animation-delay: 0.30s; }
.div-retro-rays line:nth-child(7) { animation-delay: 0.35s; }
.div-retro-rays line:nth-child(8) { animation-delay: 0.39s; }
.div-retro-rays line:nth-child(9) { animation-delay: 0.44s; }
.div-retro-rays line:nth-child(10) { animation-delay: 0.48s; }
.div-retro-rays line:nth-child(11) { animation-delay: 0.53s; }
.div-retro-rays line:nth-child(12) { animation-delay: 0.57s; }
.div-retro-rays line:nth-child(13) { animation-delay: 0.62s; }
.div-retro-rays line:nth-child(14) { animation-delay: 0.66s; }
.div-retro-rays line:nth-child(15) { animation-delay: 0.71s; }
.div-retro-rays line:nth-child(16) { animation-delay: 0.75s; }
.div-retro-circ {
transform-box: fill-box;
transform-origin: center;
animation: div-rt-dot 0.4s cubic-bezier(.34,1.56,.64,1) 0.85s both;
}
.div-retro-fl,
.div-retro-fr {
stroke-dasharray: 221;
stroke-dashoffset: 221;
animation: div-rt-draw 0.72s cubic-bezier(.16,1,.3,1) 0.98s both;
}
.div-retro-fr { animation-delay: 1.02s; }
/* v2 — slamming two-tone diner rule */
.div-retro-v2 {
margin: 32px 0;
overflow: hidden;
}
.div-retro-t {
display: block;
height: 5px;
background: #d4601a;
animation: div-rt-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-retro-b {
display: block;
height: 1px;
margin-top: 3px;
background: #e0c87a;
opacity: 0.45;
animation: div-rt-slam 0.5s cubic-bezier(.18,0,.04,1) 0.28s both;
}
/* v3 — perforated ticket-stub edge */
.div-retro-v3 {
height: 4px;
margin: 32px 0;
background: radial-gradient(circle, #d4601a 2px, transparent 2px);
background-size: 14.875px 4px;
background-repeat: repeat-x;
background-position: center;
animation: div-rt-fade 0.6s ease 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
.div-retro-rays line, .div-retro-fl, .div-retro-fr { animation: none; stroke-dashoffset: 0; }
.div-retro-circ, .div-retro-t, .div-retro-b, .div-retro-v3 { animation: none; }
}