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.
1.<div id="venn">2.<div><p>People Who like Venn Diagrams</p></div>3.<div><p>People who read my blog articles</p></div>4.<div id="overlap"><p>Just me.</p></div>5.</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.
01.#venn div{02.height: 360px;03.width: 360px;04.border-radius:180px;05.-khtml-border-radius:180px;06.-moz-border-radius:180px;07.-webkit-border-radius:180px;08.border: 1px solid #000;09.display: table;10.float: left;11.opacity: .6;12.}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.
01.#venn #overlap{02.border: 0;03.height: 30px;04.width: 30px;05.left: -350px;06.top: 150px;07.color: #ccc;08.position: relative;09.text-align: center;10.z-index: 10;11.opacity: 1;12.}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://css.dzone.com/articles/venn-diagram-entirely-css
