CSS Seven-Segment Display Tutorial

April 11, 2012

I had an idea for a little project today that needed a seven-segment display. As a first pass I’m going to implement it in all software before seeking out hardware for it.

Knowing I wanted to run my prototype in the browser I looked for a way to show a seven-segment display. I considered images, but then I decided to challenge myself to implement it in CSS only.

I recently read the CSS Hexagon Tutorial by James Tauber and I felt I could apply some of those techniques to get this working.

Step One: A Segment

The obvious first step is to get a single segment displayed.

The basic shape of a segment is actually well defined in all four edges of the box from the hexagon tutorial.

So now I just needed to extract a single edge for my first segment, which proved quite simple.

Step Two: Fill It Out

Iterating from that first segment is easy, just change which borders you need for which segment you require. However, I needed a positioning system. I decided to go with absolute positioning, with a relative wrapper. Traditionally these displays are addressed with each segment being a letter, so I followed that pattern.

The CSS for this is quite similar from segment to segment, it’s mostly positioning and picking which border to colorize.

Step Three: G Segment

Here’s where it gets interesting. Our standard segment shape will not work for the center segment, the G segment, which is beveled on both sides, something we can’t do with a single div. First let’s split it up and treat it differently for top and bottom.

Now we’ll style these using our regular segment markup.

It works, sort of. We now have the shape we want, but it’s way too thick. It won’t fit in the slot we have without looking strange.

Halving the borders and extending the width makes it look better.

This would be a good stopping point, but the angled edges don’t seem as long in G, so I tried to fix that.

The best solution I came up with was dealing with it at a smaller size, then using a transform to scale it up to where I wanted it. It’s not exact, and it’s not the same width as the other segments, but the slopes are right, it fits and it feels as close to balanced as I’ve been able to get.

Conclusion

That was pretty painless! I wish I had a better solution for G, but this one is passable.

You can check out a nifty demo with some JavaScript and on/off states here.

Got some ideas for how to make G better? Please share in the comments!

Categories: Geek
Tags: ,

Comments

  1. Nice article! Any plans to do a 9, 14, or 16 segment next? :)

    (That last demo link is broken for me.)

  2. John Hobbs says:

    Ha! I think it’s possible, but as you get bigger you’ll need more kludgy, multiple div ones like G.

    I made the mistake of trying to switch to S3 for my static files last night, without really knowing what I was doing.

    Edit: Fixed the link!

  3. Very cool, John! Also, I like these kinds of posts, keep ’em coming!

Leave A Comment

Your email will not be published.