一个div实现太极

在上个月的时候看到一篇文章《纯css样式!! 太极图!》,作者使用五个圆实现太极图,感觉不难就没有动手,看注释的时候发现一个div也可以实现一个太极,感觉有点意思,就想了想,写了个Demo。这里给大家分享一下。

太极图01

一个div实现五个圆干的事,势必要想到伪类的,圆的问题解决了,一个div分两个颜色,那也就只能通过边框来实现了。

html代码

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个div实现太极图 | 王海达博客</title>
</head>
<body>
<div></div>
</body>
</html>

大圆的实现

设置高度400px,宽度设置为0,用 border-leftborder-right 去撑开整个div的宽,同时给这两个边框不同的颜色。

1
2
3
4
5
6
7
div {
width: 0;
height: 400px;
border-left: 200px solid #000;
border-right: 200px solid #FFF;
border-radius: 50%;
}

太极图02

小圆的实现

用div的伪类 beforeafter 来实现两个圆。首先怪异盒模型,设置为块元素,设置宽高200px,背景颜色白色,边框黑色80px(两个边就是160px了,中间就是40px),最后来个 border-radius 就可以实现一个白心黑边的圆了。黑心白边的圆就是将背景色和边框颜色互换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div:before {
content: '';
display: block;
width: 200px;
height: 200px;
/* margin-left: -100px; */
background-color: #FFF;
border: 80px solid #000;
border-radius: 50%;
box-sizing: border-box;
}
div:after {
content: '';
display: block;
width: 200px;
height: 200px;
/* margin-left: -100px; */
background-color: #000;
border: 80px solid #FFF;
border-radius: 50%;
box-sizing: border-box;
}

太极图03

将上面注释掉的 margin-left 取消注释就可以了^_^!

这个主要用到了伪类和边框的拆分,用好了还是可以实现很多有意思的效果的,练习一下吧!

坚持原创技术分享,您的支持将鼓励我继续创作!