Created
May 31, 2012 18:43
-
-
Save jaketrent/2845338 to your computer and use it in GitHub Desktop.
CSS Donuts Experiments - jsFiddle: http://jsfiddle.net/gh/gist/jquery/1.7/2845338/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CSS Circle Experiment</title> | |
| <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css' /> | |
| <style> | |
| body { | |
| background: #ababab; | |
| } | |
| .container { | |
| margin: 0 auto; | |
| width: 400px; | |
| text-align: center; | |
| max-width: 100%; | |
| } | |
| h1, h2 { | |
| font-family: 'Josefin Slab', serif; | |
| } | |
| .box { | |
| position: relative; | |
| height: 200px; | |
| width: 200px; | |
| margin: 0 auto; | |
| font-family: 'Josefin Slab', serif; | |
| text-align: center; | |
| line-height: 200px; | |
| font-size: 70px; | |
| color: #add8e6; | |
| margin-bottom: 15px; | |
| } | |
| /*circles*/ | |
| .circle { | |
| border-radius: 50%; | |
| position: absolute; | |
| } | |
| .outer { | |
| top: 0; | |
| left: 0; | |
| height: 200px; | |
| width: 200px; | |
| background-color: #add8e6; | |
| z-index: 1; | |
| } | |
| .inner { | |
| top: 50px; | |
| left: 50px; | |
| height: 100px; | |
| width: 100px; | |
| background-color: #fff; | |
| z-index: 2; | |
| font-family: 'Josefin Slab', serif; | |
| text-align: center; | |
| line-height: 115px; | |
| font-size: 70px; | |
| color: #add8e6; | |
| } | |
| /*donut*/ | |
| .donut { | |
| border-radius: 50%; | |
| border: 50px solid #add8e6; | |
| height: 100px; | |
| width: 100px; | |
| position: absolute; | |
| z-index: 1; | |
| top: 0; | |
| left: 0; | |
| } | |
| .fan { | |
| position: absolute; | |
| height: 100px; | |
| width: 100px; | |
| z-index: 2; | |
| top: 0; | |
| left: 0; | |
| border-radius: 50%; | |
| } | |
| .deg90 { | |
| border-top: 50px solid #add8e6; | |
| border-right: 50px solid transparent; | |
| border-bottom: 50px solid transparent; | |
| border-left: 50px solid transparent; | |
| -webkit-transform: rotate(45deg); | |
| } | |
| .deg180 { | |
| border-top: 50px solid #add8e6; | |
| border-right: 50px solid #add8e6; | |
| border-bottom: 50px solid transparent; | |
| border-left: 50px solid transparent; | |
| -webkit-transform: rotate(45deg); | |
| } | |
| .deg270 { | |
| border-top: 50px solid #add8e6; | |
| border-right: 50px solid #add8e6; | |
| border-bottom: 50px solid #add8e6; | |
| border-left: 50px solid transparent; | |
| -webkit-transform: rotate(45deg); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>CSS Circle Experiments</h1> | |
| <h2>Inner Circle</h2> | |
| <div class="box"> | |
| <div class="circle outer"></div> | |
| <div class="circle inner">5</div> | |
| </div> | |
| <h2>Donut</h2> | |
| <div class="box"> | |
| 10 | |
| <div class="donut"></div> | |
| </div> | |
| <h2>Partials</h2> | |
| <div class="box"> | |
| 15 | |
| <div class="donut deg90"></div> | |
| </div> | |
| <div class="box"> | |
| 20 | |
| <div class="donut deg180"></div> | |
| </div> | |
| <div class="box"> | |
| 25 | |
| <div class="donut deg270"></div> | |
| </div> | |
| <div class="box"> | |
| 30 | |
| <div class="donut"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
what if i want 170deg?