What will be the best method?

What will be an elegant way to build something like this:

I came up something like this:

But yet could not handle text.

what will be the best approach? relative/absolute or some box-shadow method?

Well you could make an unordered list, then simply style the <li> elements so they have some padding, rounded corners (border-radius), a border and then box shadows and that should get you there.


was able to make something with box-shadow:

Here’s my attempt:

If you zoom in you will see the two shadows.


But what I understand is that shadow can’t have its own border, but you seems to have worked on that also, which I am trying to understand.

The lighter colour has 2px x-offset and y-offset while the darker colour has 3px x-offset and y-offset (both with zero blur and zero spread).

I was a little surprised to find that I had to put the lighter colour before the darker colour in the CSS code.

One of your shadows in your opening post looks like this, but they are all different:

The top border seems to be rather grey whereas the bottom of the shadow seems to be dark purple. That’s why I picked three different colours for border and the two shadows.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.