18 CSS Divider Collections 14 / 18
Playful Dividers
Three bright, friendly breaks — a bouncing crayon squiggle, a row of popping shapes, and a dashed cut-here line with scissors.
The code
<div class="div-playful-surface">
<p class="div-playful-text">The classroom hamster had escaped again — third time this term — and the search had become, for the children, the most educational event of the week.</p>
<div class="div-playful-v1" role="separator">
<svg viewBox="0 0 476 22" fill="none" aria-hidden="true">
<path class="div-playful-squiggle" d="M0 11 Q24 -3 48 11 Q72 25 96 11 Q120 -3 144 11 Q168 25 192 11 Q216 -3 240 11 Q264 25 288 11 Q312 -3 336 11 Q360 25 384 11 Q408 -3 432 11 Q456 25 476 11" stroke="#ff7a3d" stroke-width="3.5" stroke-linecap="round"/>
</svg>
</div>
<p class="div-playful-text">Every desk had been lifted, every backpack unzipped, and a map of the room drawn on the whiteboard with a hopeful X marked near the radiator.</p>
<div class="div-playful-v2" role="separator">
<span class="div-playful-shapes"><i class="div-playful-c"></i><i class="div-playful-t"></i><i class="div-playful-s"></i><i class="div-playful-t"></i><i class="div-playful-c"></i></span>
</div>
<p class="div-playful-text">He was found, eventually, asleep inside a shoebox lined with cotton wool — a habitat, the children insisted, that he had clearly chosen on purpose.</p>
<div class="div-playful-v3" role="separator"><span class="div-playful-scissors">✂</span></div>
<p class="div-playful-text">A certificate was drawn up, decorated with stickers, and taped above his cage: Most Adventurous Class Pet, awarded by unanimous and very loud vote.</p>
</div> <div class="div-playful-surface">
<p class="div-playful-text">The classroom hamster had escaped again — third time this term — and the search had become, for the children, the most educational event of the week.</p>
<div class="div-playful-v1" role="separator">
<svg viewBox="0 0 476 22" fill="none" aria-hidden="true">
<path class="div-playful-squiggle" d="M0 11 Q24 -3 48 11 Q72 25 96 11 Q120 -3 144 11 Q168 25 192 11 Q216 -3 240 11 Q264 25 288 11 Q312 -3 336 11 Q360 25 384 11 Q408 -3 432 11 Q456 25 476 11" stroke="#ff7a3d" stroke-width="3.5" stroke-linecap="round"/>
</svg>
</div>
<p class="div-playful-text">Every desk had been lifted, every backpack unzipped, and a map of the room drawn on the whiteboard with a hopeful X marked near the radiator.</p>
<div class="div-playful-v2" role="separator">
<span class="div-playful-shapes"><i class="div-playful-c"></i><i class="div-playful-t"></i><i class="div-playful-s"></i><i class="div-playful-t"></i><i class="div-playful-c"></i></span>
</div>
<p class="div-playful-text">He was found, eventually, asleep inside a shoebox lined with cotton wool — a habitat, the children insisted, that he had clearly chosen on purpose.</p>
<div class="div-playful-v3" role="separator"><span class="div-playful-scissors">✂</span></div>
<p class="div-playful-text">A certificate was drawn up, decorated with stickers, and taped above his cage: Most Adventurous Class Pet, awarded by unanimous and very loud vote.</p>
</div>@keyframes div-play-draw { to { stroke-dashoffset: 0; } }
@keyframes div-play-pop { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes div-play-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-play-slide { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.div-playful-surface {
background: #fff4dc;
padding: 36px 40px;
border-radius: 12px;
}
.div-playful-text {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 14px;
line-height: 1.8;
color: #4a3a22;
margin: 0;
}
/* v1 — bouncing crayon squiggle */
.div-playful-v1 { margin: 30px 0; }
.div-playful-v1 svg { display: block; width: 100%; height: 22px; overflow: visible; }
.div-playful-squiggle {
stroke-dasharray: 760;
stroke-dashoffset: 760;
animation: div-play-draw 1.1s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — row of popping shapes */
.div-playful-v2 {
display: flex;
align-items: center;
margin: 30px 0;
}
.div-playful-v2::before,
.div-playful-v2::after {
content: '';
flex: 1;
height: 2px;
border-radius: 2px;
background: #ffd089;
animation: div-play-grow 0.6s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-playful-v2::before { transform-origin: right; }
.div-playful-v2::after { transform-origin: left; animation-delay: 0.45s; }
.div-playful-shapes {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
}
.div-playful-shapes i {
display: block;
animation: div-play-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-playful-c { width: 11px; height: 11px; border-radius: 50%; background: #ff7a3d; animation-delay: 0.1s; }
.div-playful-t { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #3db4c4; animation-delay: 0.2s; }
.div-playful-s { width: 12px; height: 12px; background: #ffc23d; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-delay: 0.3s; }
.div-playful-shapes i:nth-child(4) { animation-delay: 0.4s; }
.div-playful-shapes i:nth-child(5) { animation-delay: 0.5s; }
/* v3 — dashed cut-here line with scissors */
.div-playful-v3 {
display: flex;
align-items: center;
gap: 10px;
margin: 30px 0;
}
.div-playful-v3::before,
.div-playful-v3::after {
content: '';
flex: 1;
height: 2px;
background: repeating-linear-gradient(to right, #c4906a 0 7px, transparent 7px 13px);
animation: div-play-grow 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
.div-playful-v3::before { transform-origin: right; }
.div-playful-v3::after { transform-origin: left; animation-delay: 0.24s; }
.div-playful-scissors {
flex-shrink: 0;
font-size: 16px;
color: #c4906a;
animation: div-play-slide 0.5s cubic-bezier(.34,1.56,.64,1) 0.55s both;
}
@media (prefers-reduced-motion: reduce) {
.div-playful-squiggle { animation: none; stroke-dashoffset: 0; }
.div-playful-v2::before, .div-playful-v2::after, .div-playful-shapes i,
.div-playful-v3::before, .div-playful-v3::after, .div-playful-scissors { animation: none; }
} @keyframes div-play-draw { to { stroke-dashoffset: 0; } }
@keyframes div-play-pop { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes div-play-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-play-slide { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.div-playful-surface {
background: #fff4dc;
padding: 36px 40px;
border-radius: 12px;
}
.div-playful-text {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 14px;
line-height: 1.8;
color: #4a3a22;
margin: 0;
}
/* v1 — bouncing crayon squiggle */
.div-playful-v1 { margin: 30px 0; }
.div-playful-v1 svg { display: block; width: 100%; height: 22px; overflow: visible; }
.div-playful-squiggle {
stroke-dasharray: 760;
stroke-dashoffset: 760;
animation: div-play-draw 1.1s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — row of popping shapes */
.div-playful-v2 {
display: flex;
align-items: center;
margin: 30px 0;
}
.div-playful-v2::before,
.div-playful-v2::after {
content: '';
flex: 1;
height: 2px;
border-radius: 2px;
background: #ffd089;
animation: div-play-grow 0.6s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-playful-v2::before { transform-origin: right; }
.div-playful-v2::after { transform-origin: left; animation-delay: 0.45s; }
.div-playful-shapes {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
}
.div-playful-shapes i {
display: block;
animation: div-play-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-playful-c { width: 11px; height: 11px; border-radius: 50%; background: #ff7a3d; animation-delay: 0.1s; }
.div-playful-t { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #3db4c4; animation-delay: 0.2s; }
.div-playful-s { width: 12px; height: 12px; background: #ffc23d; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-delay: 0.3s; }
.div-playful-shapes i:nth-child(4) { animation-delay: 0.4s; }
.div-playful-shapes i:nth-child(5) { animation-delay: 0.5s; }
/* v3 — dashed cut-here line with scissors */
.div-playful-v3 {
display: flex;
align-items: center;
gap: 10px;
margin: 30px 0;
}
.div-playful-v3::before,
.div-playful-v3::after {
content: '';
flex: 1;
height: 2px;
background: repeating-linear-gradient(to right, #c4906a 0 7px, transparent 7px 13px);
animation: div-play-grow 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
.div-playful-v3::before { transform-origin: right; }
.div-playful-v3::after { transform-origin: left; animation-delay: 0.24s; }
.div-playful-scissors {
flex-shrink: 0;
font-size: 16px;
color: #c4906a;
animation: div-play-slide 0.5s cubic-bezier(.34,1.56,.64,1) 0.55s both;
}
@media (prefers-reduced-motion: reduce) {
.div-playful-squiggle { animation: none; stroke-dashoffset: 0; }
.div-playful-v2::before, .div-playful-v2::after, .div-playful-shapes i,
.div-playful-v3::before, .div-playful-v3::after, .div-playful-scissors { animation: none; }
}