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!