HTML5 Zone is brought to you in partnership with:

I'm a Worldwide Developer Evangelist for Adobe. My job basically entails me traveling the world and talking about the developer tools and technologies that Adobe has to offer or that we support. I'm also the author of Driving Technical Change. It's about convinving reluctant co-workers to adopt new tools and techniques. Terrence is a DZone MVB and is not an employee of DZone and has posted 40 posts at DZone. You can read more from them at their website. View Full User Profile

Venn Diagram entirely in CSS

  • submit to reddit

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.

<div id="venn">
    <div><p>People Who like Venn Diagrams</p></div>
    <div><p>People who read my blog articles</p></div>
    <div id="overlap"><p>Just me.</p></div>

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.

#venn div{
    height: 360px;
    width: 360px;
    border: 1px solid #000;
    display: table;
    float: left;
    opacity: .6;

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.

#venn div:nth-child(1){
    background-color: #FF0000;
    color: #FFF;
    padding-right: 60px;

#venn div:nth-child(2){
    background-color: #0000FF;
    color: #FFF;
    margin-left: -60px;
    padding-left: 60px;

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

#venn #overlap{
    border: 0;
    height: 30px;
    width: 30px;
    left: -350px;
    top: 150px;
    color: #ccc;
    position: relative;
    text-align: center;
    z-index: 10;
    opacity: 1;

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.



Published at DZone with permission of Terrence Ryan, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)



Brian Hancock replied on Mon, 2013/01/07 - 6:14pm


The example  does not work in Firefox 17... not sure about other versions



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.