本文章来自前端初学者的 个人经验(不喜勿喷, 不足的地方欢迎指导!)
首先, 用 div 写盒子大致的布局可以分为上下两个 盒子 (一黑一白) 做出两个半圆对起来, 然后 再用两个盒子作为里边的弧度.
html 代码
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <style>
- body,h1,h2,h3,h4,h5,h6,div,ul,ol,dl,p{margin:0;padding:0;}
- /* 样式清除 */
- body{
- background-color:gray;
- }
- div.taiji{
- position:relative;
- width:400px;
- height:400px;
- margin:100px auto;
- }
- .top{
- float:left;
- width:400px;
- height:200px;
- overflow:hidden;
- }
- .top-1{
- width:400px;
- height:400px;
- background-color:white;
- }
- .top-2{
- width:400px;
- height:400px;
- background-color:black;
- }
- .bottom{
- width:400px;
- height:200px;
- }
- .add-1{
- position:absolute;
- top:100px;
- left:0px;
- width:200px;
- height:200px;
- background-color:black;
- }
- .add-2{
- position:absolute;
- top:100px;
- right:0px;
- width:200px;
- height:200px;
- background-color:white;
- }
- .add .small{
- width:100px;
- height:100px;
- margin:auto;
- background-color:red;
- }
- .add-1 .small{
- margin-top:50px;
- background-color:white;
- }
- .add-2 .small{
- margin-top:50px;
- background-color:black;
- }
- </style>
- </head>
- <body>
- <div class="taiji">
- <div class="top">
- <div class="top-1"></div>
- </div>
- <div class="bottom">
- <div class="top-2"></div>
- </div>
- <div class="add add-1">
- <div class="small"></div>
- </div>
- <div class="add add-2">
- <div class="small"></div>
- </div>
- </div>
- </body>
- </html>
首先 写出上面的盒子将它 下一半 超出隐藏, 再用浮动属性让浮起来. 接着下面的盒子上一半就在浮起来的盒子下面了.
这样 外面的黑白两块写好, 下面因为 里面还要有一个超出的弧度, 这就可以用定位补充的两个盒子 插入进去. 里面的
小圆也是如此 居中就行! 最后来写 给整体 所有的 div 来个 border-radius:50%; 就全部变成 圆形. 可是这时候会发现
我们的上半圆它形状不对!
html 代码
- <!doctype html><!-- 网页头信息 -->
- <html lang="en"><!-- 根标签 -->
- <head><!-- 网页头部内容(用户不可见)-->
- <meta charset="UTF-8"><!-- 字符编码 -->
- <style>
- body,h1,h2,h3,h4,h5,h6,div,ul,ol,dl,p{margin:0;padding:0;}
- /* 样式清除 */
- body{
- background-color:gray;
- }
- div{
- border-radius:50%;
- }
- div.taiji{
- position:relative;
- width:400px;
- height:400px;
- margin:100px auto;
- }
- .top{
- float:left;
- width:400px;
- height:200px;
- overflow:hidden;
- }
- .top-1{
- width:400px;
- height:400px;
- background-color:white;
- }
- .top-2{
- width:400px;
- height:400px;
- background-color:black;
- }
- .bottom{
- width:400px;
- height:200px;
- }
- .add-1{
- position:absolute;
- top:100px;
- left:0px;
- width:200px;
- height:200px;
- background-color:black;
- }
- .add-2{
- position:absolute;
- top:100px;
- right:0px;
- width:200px;
- height:200px;
- background-color:white;
- }
- .add .small{
- width:100px;
- height:100px;
- margin:auto;
- background-color:red;
- }
- .add-1 .small{
- margin-top:50px;
- background-color:white;
- }
- .add-2 .small{
- margin-top:50px;
- background-color:black;
- }
- </style>
- </head>
- <body>
- <div class="taiji">
- <div class="top">
- <div class="top-1"></div>
- </div>
- <div class="bottom">
- <div class="top-2"></div>
- </div>
- <div class="add add-1">
- <div class="small"></div>
- </div>
- <div class="add add-2">
- <div class="small"></div>
- </div>
- </div>
- </body>
- </html>
因为上面的盒子高度只有整体的一半, 所以变形, 这时候就需要单独把它的左下角, 右下角的弧度去了, 只改变上面的弧度即可.
html 代码
- <!doctype html><!-- 网页头信息 -->
- <html lang="en"><!-- 根标签 -->
- <head><!-- 网页头部内容(用户不可见)-->
- <meta charset="UTF-8"><!-- 字符编码 -->
- <style>
- body,h1,h2,h3,h4,h5,h6,div,ul,ol,dl,p{margin:0;padding:0;}
- /* 样式清除 */
- body{
- background-color:gray;
- }
- div{
- border-radius:50%;
- }
- div.taiji{
- position:relative;
- width:400px;
- height:400px;
- margin:100px auto;
- }
- .top{
- float:left;
- width:400px;
- height:200px;
- overflow:hidden;
- border-bottom-right-radius:0%;
- border-bottom-left-radius:0%;
- }
- .top-1{
- width:400px;
- height:400px;
- background-color:white;
- }
- .top-2{
- width:400px;
- height:400px;
- background-color:black;
- }
- .bottom{
- width:400px;
- height:200px;
- }
- .add-1{
- position:absolute;
- top:100px;
- left:0px;
- width:200px;
- height:200px;
- background-color:black;
- }
- .add-2{
- position:absolute;
- top:100px;
- right:0px;
- width:200px;
- height:200px;
- background-color:white;
- }
- .add .small{
- width:100px;
- height:100px;
- margin:auto;
- background-color:red;
- }
- .add-1 .small{
- margin-top:50px;
- background-color:white;
- }
- .add-2 .small{
- margin-top:50px;
- background-color:black;
- }
- </style>
- </head>
- <body>
- <div class="taiji">
- <div class="top">
- <div class="top-1"></div>
- </div>
- <div class="bottom">
- <div class="top-2"></div>
- </div>
- <div class="add add-1">
- <div class="small"></div>
- </div>
- <div class="add add-2">
- <div class="small"></div>
- </div>
- </div>
- </body>
- </html>
有兴趣的 大家也可加个 transition 属性让它动起来, 是不是很炫酷呢.
html 代码
- <!doctype html><!-- 网页头信息 -->
- <html lang="en"><!-- 根标签 -->
- <head><!-- 网页头部内容(用户不可见)-->
- <meta charset="UTF-8"><!-- 字符编码 -->
- <style>
- body,h1,h2,h3,h4,h5,h6,div,ul,ol,dl,p{margin:0;padding:0;}
- /* 样式清除 */
- body{
- background-color:gray;
- }
- div{
- border-radius:50%;
- }
- div.taiji{
- position:relative;
- width:400px;
- height:400px;
- margin:100px auto;
- transition: all 6s ease-in-out;
- }
- .taiji:hover {
- transform: rotate(3600deg);
- }
- .top{
- float:left;
- width:400px;
- height:200px;
- overflow:hidden;
- border-bottom-right-radius:0%;
- border-bottom-left-radius:0%;
- }
- .top-1{
- width:400px;
- height:400px;
- background-color:white;
- }
- .top-2{
- width:400px;
- height:400px;
- background-color:black;
- }
- .bottom{
- width:400px;
- height:200px;
- }
- .add-1{
- position:absolute;
- top:100px;
- left:0px;
- width:200px;
- height:200px;
- background-color:black;
- }
- .add-2{
- position:absolute;
- top:100px;
- right:0px;
- width:200px;
- height:200px;
- background-color:white;
- }
- .add .small{
- width:100px;
- height:100px;
- margin:auto;
- background-color:red;
- }
- .add-1 .small{
- margin-top:50px;
- background-color:white;
- }
- .add-2 .small{
- margin-top:50px;
- background-color:black;
- }
- </style>
- </head>
- <body>
- <div class="taiji">
- <div class="top">
- <div class="top-1"></div>
- </div>
- <div class="bottom">
- <div class="top-2"></div>
- </div>
- <div class="add add-1">
- <div class="small"></div>
- </div>
- <div class="add add-2">
- <div class="small"></div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/49205/6f788e8d38b66ee44dcf81f047844220.html