Skip to content

Instantly share code, notes, and snippets.

@HereIsJade

HereIsJade/index.html

Created June 25, 2018 15:11
Show Gist options
  • Save HereIsJade/03d67979f98aa722205cb3ff284e1456 to your computer and use it in GitHub Desktop.
Save HereIsJade/03d67979f98aa722205cb3ff284e1456 to your computer and use it in GitHub Desktop.
Download ZIP
Yin-yang // source http://jsbin.com/laqeriw
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Yin-yang</title>
<style id="jsbin-css">
body{
background: #666;
}
#yinyang{
margin:40px auto;
width:200px;
height:200px;
border-radius:50%;
position: relative;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
#yinyang > .left{
width:100px;
height:100px;
border-radius:50%;
background:black;
position: absolute;
top:50px;
}
#yinyang > .right{
width:100px;
height:100px;
border-radius:50%;
background:white;
position: absolute;
top:50px;
right:0px;
}
#yinyang > .left > .small-left{
position:absolute;
width:20px;
height:20px;
border-radius:50%;
background:white;
top:40px;
left:40px;
}
#yinyang > .right > .small-right{
position:absolute;
width:20px;
height:20px;
border-radius:50%;
background:black;
top:40px;
right:40px;
}
</style>
</head>
<body>
<div id="yinyang">
<div class="left">
<div class="small-left"></div>
</div>
<div class="right">
<div class="small-right"></div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">body{
background: #666;
}
#yinyang{
margin:40px auto;
width:200px;
height:200px;
border-radius:50%;
position: relative;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
#yinyang > .left{
width:100px;
height:100px;
border-radius:50%;
background:black;
position: absolute;
top:50px;
}
#yinyang > .right{
width:100px;
height:100px;
border-radius:50%;
background:white;
position: absolute;
top:50px;
right:0px;
}
#yinyang > .left > .small-left{
position:absolute;
width:20px;
height:20px;
border-radius:50%;
background:white;
top:40px;
left:40px;
}
#yinyang > .right > .small-right{
position:absolute;
width:20px;
height:20px;
border-radius:50%;
background:black;
top:40px;
right:40px;
}</script>
</body>
</html>
Raw
jsbin.laqeriw.css
body{
background: #666;
}
#yinyang{
margin:40px auto;
width:200px;
height:200px;
border-radius:50%;
position: relative;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
#yinyang > .left{
width:100px;
height:100px;
border-radius:50%;
background:black;
position: absolute;
top:50px;
}
#yinyang > .right{
width:100px;
height:100px;
border-radius:50%;
background:white;
position: absolute;
top:50px;
right:0px;
}
#yinyang > .left > .small-left{
position:absolute;
width:20px;
height:20px;
border-radius:50%;
background:white;
top:40px;
left:40px;
}
#yinyang > .right > .small-right{
position:absolute;
width:20px;
height:20px;
border-radius:50%;
background:black;
top:40px;
right:40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment