Over a million developers have joined DZone.

Venn Diagram entirely in CSS

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

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.


Source: http://www.terrenceryan.com/blog/post.cfm/venn-diagram-entirely-in-css

The Web Dev Zone is brought to you by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}