admin 管理员组

文章数量: 1086866

CSS：太极图

2019独角兽企业重金招聘Python工程师标准>>> 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>diagram</title><style>.diagram{width: 400px;height: 400px;border: 1px solid #c0c0c0;margin: 100px auto;position: relative;border-radius: 200px;}.diagram::before,.diagram::after{content: "";display: block;width: 200px;height: 400px;position: absolute;}.diagram::before{border-radius: 200px 0 0 200px;background-color: #fff;top:0px;left: 0px; }.diagram::after{border-radius: 0 200px 200px 0;background-color: #000;top:0px;right: 0px;}.child{width: 200px;height: 200px;border-radius: 100px;position: absolute;left: 100px;z-index: 1;}.child1{background-color: #000;top:0;} .child2{background-color:#fff;bottom:0px;} .min{width: 40px;height: 40px;background-color: #fff;position: absolute;top:80px;left: 80px;border-radius: 20px;}.min2{background-color: #000;}</style>
</head>
<body><div class="diagram"><div class="child child1"><div class=" min min1"></div></div><div class="child child2"><div class="min min2"></div></div></div>
</body>
</html>

转载于:

本文标签： CSS太极图

版权声明：本文标题：CSS：太极图 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687254612a81649.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。