用html和CSS显示一个太极图
时间: 2024-03-17 22:40:11 浏览: 40
好的,以下是实现方法:
HTML代码:
```html
<div class="taiji">
<div class="yin"></div>
<div class="yang"></div>
</div>
```
CSS代码:
```css
.taiji {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #000;
position: relative;
}
.taiji .yin,
.taiji .yang {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.taiji .yin {
background-color: #fff;
z-index: 1;
}
.taiji .yang {
background-color: #000;
}
.taiji .yin:before,
.taiji .yang:before {
content: "";
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #000;
}
.taiji .yin:before {
background-color: #fff;
}
.taiji .yang:before {
background-color: #000;
}
```
这样就实现了一个简单的太极图。可以通过修改CSS样式来实现不同的效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)