近來，CSS八卦圖成為了網(wǎng)站設(shè)計(jì)中一個(gè)非常流行的元素。那么，CSS八卦圖是怎么做出來的呢？接下來，我將會(huì)介紹一下CSS八卦圖是如何實(shí)現(xiàn)的。

.container {
position: relative;
width: 200px;
height: 200px;
}
.circle {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
}
.yin {
background-color: #000;
}
.yang {
background-color: #fff;
}
.yin::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 50%;
width: 50%;
height: 100%;
background-color: #fff;
border-radius: 50% 0 0 50%;
}
.yin::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: #000;
border-radius: 0 50% 50% 0;
}
.yang::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: #000;
border-radius: 50% 0 0 50%;
}
.yang::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 50%;
width: 50%;
height: 100%;
background-color: #fff;
border-radius: 0 50% 50% 0;
}

首先，我們需要一個(gè)容器，然后在這個(gè)容器里創(chuàng)建兩個(gè)div元素，一個(gè)代表陰，一個(gè)代表陽。每個(gè)div元素都是一個(gè)圓形。陰是黑色的，陽是白色的。

然后，我們需要給陰和陽各自的伸縮部分設(shè)定一個(gè)偽元素。伸縮部分是指圓形朝向八卦中間位置的部分。偽元素的寬度和高度都是50%。偽元素的前景色和背景色分別與陰和陽的背景色相反。偽元素的圓角值也不同，一個(gè)有左圓角，一個(gè)有右圓角。

最后，我們把陰和陽的伸縮部分都定位到中間位置。

以上就是CSS八卦圖的制作過程，希望對您有所幫助。