Skip to content

Instantly share code, notes, and snippets.

@vindia

vindia/venn.html

Created January 23, 2012 10:04
Show Gist options
  • Save vindia/1662280 to your computer and use it in GitHub Desktop.
Save vindia/1662280 to your computer and use it in GitHub Desktop.
Download ZIP
Venn Diagram in HTML and CSS
Raw
venn.html
<!doctype html>
<title>A Venn Diagram in HTML and CSS</title>
<style>
div {
float: left;
width: 100px;
height: 100px;
border-radius: 50px;
color: #fff;
text-align: center;
vertical-align: middle;
font-size: 1em;
line-height: 100px;
text-transform: uppercase;
font-weight: bold;
font-family: sans-serif;
position: relative;
}
.one { background-color: blue; }
.two::before{ content: 'c'; position: absolute; left: 10px }
.two { background-color: rgba(255,0,0,0.5); margin-left: -30px; }
</style>
<div class="one">a</div>
<div class="two">b</div>
<!--
See it in action at http://jsfiddle.net/RefGM/1/
Thx to Arjan Eising for some positioning hints
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment