Skip to content

Instantly share code, notes, and snippets.

@ryndel

ryndel/dabblet.css

Created January 4, 2012 19:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryndel/1561538 to your computer and use it in GitHub Desktop.
Save ryndel/1561538 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {
background: #000;
min-height:100%;
}
.circle {
position:absolute;
background-color:red;
width:200px;
height:200px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
.half-circle {
position:absolute;
background-color:red;
width:100px;
height:200px;
-moz-border-radius:100px 0 0 100px;
-webkit-border-radius:100px 0 0 100px;
border-radius:100px 0 0 100px;
left:300px;
}
.pie {
position:absolute;
width:200px;
height:200px;
background-color:red;
clip:rect(0px,100px,200px,0px);
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
left:50px;
top:300px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}
#piece1 {
}
#piece1 .pie {
color:red;
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
#piece2 {
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
#piece2 .pie {
color:green;
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
#piece3 {
-moz-transform:rotate(240deg);
-webkit-transform:rotate(240deg);
-o-transform:rotate(240deg);
transform:rotate(120deg);
}
#piece3 .pie {
color:blue;
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
.hold.gt50 {
clip:rect(auto, auto, auto, auto);
}
.pie.fill {
-moz-transform:rotate(180deg) !important;
-webkit-transform:rotate(180deg) !important;
transform:rotate(180deg) !important;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<body>
<div class="circle"></div>
<div class="half-circle"></div>
<div class="pie"></div>
<div id="piece1" class="hold">
<div class="pie"></div>
</div>
<div id="piece3" class="hold">
<div class="pie"></div>
</div>
<div id="piece3" class="hold">
<div class="pie"></div>
</div>
</body>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment