一、要求
1.使用HTML+CSS完成
2.只用一个盒子模型
二、思路
-
首先，创建一个 HTML 元素作为容器，比如一个
<div>元素。 -
通过 CSS 设置这个容器为圆形，使用
border-radius: 50%;来实现。 -
利用 CSS 的
::before和::after伪元素来分别绘制太极图中的黑白两个半圆。- 对于黑色半圆，设置其位置
top：0px、宽度和背景颜色为白色，调整边框线的宽度实现上半部分黑色圆包含白色小圆。 - 对于白色半圆，同样设置位置
bottom: 0px、宽度和背景颜色为黑色，调整边框线的宽度实现上半部分白色圆包含黑色小圆。
- 对于黑色半圆，设置其位置
-
通过调整元素的位置、大小和边框等属性，使整个图形看起来协调和准确。
三、运行效果
四、源代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
position: relative;
width: 400px;
height: 400px;
background-color: #fff;
border: 2px solid #000;
border-radius: 50%;
background:linear-gradient(to right,#fff 50%,#000 50%);
}
.taiji::before,
.taiji::after {
content: '';
width: 38px;
height: 38px;
border-radius: 50%;
border: 80px solid transparent;
}
.taiji::before {
position: absolute;
left: 100px;
top: 0px;
background: #fff;
border-color: #000;
}
.taiji::after{
position: absolute;
left: 100px;
bottom: 0px;
background: #000;
border-color: #fff;
}
</style>
</head>
<body>
<div class="taiji">
</div>
</body>
</html>
