HTML&CSS——001太极

HTML和CSS是一对好兄弟，如何用他们制作出好看的效果，一直是同学们的一个疑问。
从今天开始，秋哥给大家分享一些利用这哥俩制作出的好玩有趣的效果，代码会附源码给大家，也希望大家多去尝试。如果有同学制作出很好玩儿的效果，欢迎投稿鸭~

制作思路：
1 CSS的定位
2 边框的粗细可以分别调整

代码展示：

太极

body{
background-color: antiquewhite;
}
#yin-yang0 {
width: 96px;
height: 48px;
background: #fff;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

#yin-yang1 {
position: absolute;
top: 25px;
left: 2px;
background: #fff;
border: 18px solid black;
border-radius: 100%;
width: 12px;
height: 12px;
}

#yin-yang2 {
position: absolute;
top: 25px;
left: 50px;
background: black;
border: 18px solid #fff;
border-radius:100%;
width: 12px;
height: 12px;
}