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:

·         Dusting off front-end skills: CSS Venn Diagram

·         HTML And CSS Venn Diagram

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.

view source

print?

<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>

</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  This will ensure that when they overlap they will form a new color.

view source

print?

#venn div{

height: 360px;

width: 360px;

border-radius:180px;

-khtml-border-radius:180px;

-moz-border-radius:180px;

-webkit-border-radius:180px;

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.

view source

print?

#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.

view source

print?

#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.