这是一个简单的太极图的写法，大伙觉得有用，可以点个赞，直接上代码了!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>太极图</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: #666666;
}
#wrap {
width: 300px;
height: 300px;
margin: 200px auto 0;
position: relative;
}
/* 清除浮动 */
.clearfix:after {
content: '';
display: block;
clear: both;
}
#left,#right {
width: 150px;
height: 300px;
float: left;
}
#left {
background: #000000;
border-radius: 150px 0 0 150px;
}
#right {
background: #ffffff;
border-radius: 0 150px 150px 0;
}
#wrapTop,#wrapBottom {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
text-align: center;
line-height: 150px;
}
#wrapTop {
background: #000000;
top: 0;
left: 75px;
}
#wrapBottom {
background: #ffffff;
bottom: 0;
left: 75px;
}
/* 小圆圈 */
span {
display: inline-block;
/* 行内块垂直居中 需配合在父元素加 line-height*/
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
}
#wrapTop span {
background: #ffffff;
}
#wrapBottom span {
background: #000000;
}
</style>
</head>
<body>
<div id="wrap" class="clearfix">
<div id="left"></div>
<div id="right"></div>
<div id="wrapTop">
<span></span>
</div>
<div id="wrapBottom">
<span></span>
</div>
</div>
</body>
</html>
4479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
