DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Venn Diagram entirely in CSS

Venn Diagram entirely in CSS

Terrence Ryan user avatar by
Terrence Ryan
·
Feb. 04, 12 · Web Dev Zone · Interview
Like (1)
Save
Tweet
14.09K Views

Join the DZone community and get the full member experience.

Join For Free

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.

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

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

#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

CSS Diagram

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Develop With Oracle Transactional Event Queues
  • Machine Learning in Cybersecurity
  • Understand Source Code — Deep Into the Codebase, Locally and in Production
  • Data Science Project Folder Structure

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo