Taking a static image and turning it into CSS

Hi guys

I have a circular image similar to this (pls ignore numbers, this is just an example):


And each “segment” is a different color with some text in it, and a
slight gradient coming off the outer edge (like an outer glow).

We are currently using an image map so each segment can be clicked on,
however I’d like to break the image up as I want to add hover states and
I feel it’s both a good exercise, a lighter file and good practice.

I think I’d like to “draw” each segment as a css somehow (svg?) so I can
easily add hover state colors. I think I;d like to avoid using
background images, but I am open to advice.

I feel getting the perfect segmentation will be a challenge. And I guess
I’d need to use some absolute positioning to get the components working
(with a relative parent?)

Here is a very rough draft:

.circle {
position :relative;

.segment 1 {
position: absolute;
X cords???
y cords???

1 Like

Try taking a look at this article by Sara Soueidan - if she doesn’t know how to do such things, no one does


1 Like

Sara also has a great article in creating a circular menu using transforms rather than svg.

1 Like

Rather than placing the segs with css, i would probably just draw this in Illustrator (or similar) and save to SVG.
The svg code would need to be copied into the html, so it’s in-line, that way css can be applied to it. You can make it a php include for neater html. But when the svg is in-line, you can add classes to the paths that make each segment. Then you can target those classes with css to colour them as you wish.

Something along these lines?


Hi - this looks pretty much like what I was after. Thanks!

Cheers, this is very useful!

Perfect tute for me, cheers!

Thank you, this is 100% the best approach. For this task, I also need to ensure the resulting object is accessible, and an SVG is the best option for this (as it;s readable by the DOM).

Combined with the code generator that Chris posted, you guys have really helped me a lot.


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