This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.
Inspiration
Liquorice allsorts — my favourite snack, although not good for my blood pressure 😁
Demo
Journey
Each delicious piece is a <ul>
-tag with a <li>
for each "layer":
<ul>
<li style="--bg:#61442c"></li>
<li style="--bg:#262626"></li>
<li style="--bg:#61442c"></li>
<li style="--bg:#262626"></li>
<li style="--bg:#61442c"></li>
</ul>
And CSS:
li {
--h: calc(var(--w) / 6);
background: var(--bg);
grid-area: 1 / 1;
height: var(--w);
list-style: none;
width: var(--w);
position: relative;
}
ul {
all: unset;
display: grid;
}
To position the layers with an offset, --h
(a sixth of the width), I use:
&:nth-of-type(1) {
left: calc(0px - (2 * var(--h)));
top: calc(0px - (2 * var(--h)));
}
&:nth-of-type(2) {
left: calc(0px - var(--h));
top: calc(0px - var(--h));
}
&:nth-of-type(4) {
left: calc(0px - (-1 * var(--h)));
top: calc(0px - (-1 * var(--h)));
}
&:nth-of-type(5) {
left: calc(0px - (-2 * var(--h)));
top: calc(0px - (-2 * var(--h)));
}
Next, apply transform: skewX(-20deg)
to the <ul>
:
Add small "triangles" to the edges with ::before
and ::after
pseudo-elements — using clip-path
for the triangles:
li {
&::after, &::before {
background: var(--bg);
content: '';
height: var(--h);
position: absolute;
width: var(--h);
}
&::after {
clip-path: polygon(0 0, 0 100%, 100% 100%);
right: 1px;
top: calc(1px - var(--h));
}
&::before {
bottom: 1px;
clip-path: polygon(0 0, 100% 0, 100% 100%);
left: calc(1px - var(--h));
}
}
… and finally, apply a box-shadow
to each <li>
:
li {
box-shadow: calc(0px - var(--h)) calc(0px - var(--h)) 0 0px var(--bg);
}
And that's it! All there's left to do is to add or remove layers, change colors (yellow, orange, pink, white) — and rotate them:
@keyframes rotate {
0% { rotate: var(--d); }
100% { rotate: calc(360deg + var(--d)); }
}
— where --d
is a rotation angle set on each <ul>
:
<ul style="--d:91deg;"> ... </ul>
Enjoy your snack!
Top comments (4)
Amazing work. I do love liquorice allsorts!
Thank you!
It's 👍 good, Mads
Thanks!