Skip to content

Instantly share code, notes, and snippets.

@felipecabargas

felipecabargas/yinyang.css

Created September 15, 2013 21:40
Show Gist options
  • Save felipecabargas/6574545 to your computer and use it in GitHub Desktop.
Save felipecabargas/6574545 to your computer and use it in GitHub Desktop.
Download ZIP
Yin-Yang Pure CSS
Raw
yinyang.css
#olaquehace {
width: 100px; height: 200px;
background: #fff;
border-color: #000;
border-style: solid;
border-width: 2px 100px 2px 2px;
border-radius: 100%;
position: relative;
}
#olaquehace:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #fff;
border: 36px solid #000;
border-radius: 100%;
width: 28px;
height: 28px;
}
#olaquehace:after {
content: "";
position: absolute;
top: 0;
left: 50%;
background: #000;
border: 36px solid #fff;
border-radius:100%;
width: 28px;
height: 28px;
}
Raw
yinyang.html
<html>
<head>
<link href='yinyang.css' rel="stylesheet" type="text/css">
</head>
<body>
<div id="olaquehace"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment