纯CSS实现的太极图
纯CSS实现的太极图：
<!DOCTYPE html>
<html>
<head>
<title>纯CSS实现的太极图</title>
<style>
body {background:#eee;}
#yin-yang {
width: 96px;
height: 48px;
background: black;
border-color: white;
border-style: solid;
border-width: 0px 0px 48px 0px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: black;
border: 18px solid white;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: white;
border: 18px solid black;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html> 点赞0
支持一下