Venn Diagram entirely in CSS

A friend of mine alerted me this weekend to just how much I have a weird fascination with Venn diagrams. I decided to roll with it. So yeah, I have an irrational love of Venn diagrams. But that begs the question, can I make a Venn diagram with just CSS?

I found a couple of examples out there:

But I felt like they had a bit too much fluff in the HTML markup. Not that there is anything technically wrong with their implementations. I prefer complexity in my CSS and not in my HTML. It’s probably just a subjective thing, but I do.

So how do you do it?

First you create 3 divs. 1 for each Venn circle, and 1 for the overlap section. Each div contains a p with content in it.

https://gist.github.com/1664396.js?file=htmlportion.html

Then you go to style each of the circles. Give them matching heights and widths, and a border radius of half of the height. This creates the circle. Then give each one an opacity below 1. This will ensure that when they overlap they will form a new color.

https://gist.github.com/1664396.js?file=circles.css

I then created two rules based on the nth child css selector to color each of the circles. I also padded to ensure that there would be a space to write in the overlap section.

https://gist.github.com/1664396.js?file=eachcircle.css

Finally I styled the overlap section using relative positioning and pulled it back towards the center.

https://gist.github.com/1664396.js?file=overlap.css

The real trick is to watch the pixel counts because a couple are directly related.

To create a circle:

  • width must equal height
  • border radius must equal 50% of width.

To overlap circles:

  • Circle 2 must have negative x left margin
  • (Or Circle 1 must have negative x right margin)
  • Each circle must have x padding-left or x padding-right to ensure its text doesn’t spill over borders

It looks like the example works across modern browsers, including IE 9, but not previous versions.

One thought on “Venn Diagram entirely in CSS

  1. Hi –
    Sorry I missed you in Philly last week. Where does Adobe keep videos/tutorial on Edge?
    FYI- the example shows slightly flattened circles and the “Just Me” text is shoved into the right circle on FF9.0.1 on OS X 10.7. Wouldn’t it be nice if there was a CSS rule to just make circles?
    Josh

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s