DEV Community

Cover image for Liquorice Allsorts
Mads Stoumann
Mads Stoumann

Posted on

13 5 4 3 5

Liquorice Allsorts

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":

Layers

<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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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)));
  }
Enter fullscreen mode Exit fullscreen mode

Next, apply transform: skewX(-20deg) to the <ul>:

Skew

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));
  }
}
Enter fullscreen mode Exit fullscreen mode

Before and after

… and finally, apply a box-shadow to each <li>:

li {
   box-shadow: calc(0px - var(--h)) calc(0px - var(--h)) 0 0px var(--bg);
}
Enter fullscreen mode Exit fullscreen mode

Box Shadow

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)); }
}
Enter fullscreen mode Exit fullscreen mode

— where --d is a rotation angle set on each <ul>:

<ul style="--d:91deg;"> ... </ul>
Enter fullscreen mode Exit fullscreen mode

Enjoy your snack!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (4)

Collapse
 
philiphow profile image
Philip How

Amazing work. I do love liquorice allsorts!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

It's 👍 good, Mads

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up