用HTML和CSS完成一个八卦图案

首先，在一个父级div里写四个子级div，并分别给它们一个class名

<div class="f">

        <div class="z1"></div> 

        <div class="z2"></div>

        <div class="z3"></div>

        <div class="z4"></div>

</div>

然后，写入.f的css样式

.f{

            width: 600px;

            height: 600px;

            border: 1px solid black;

            border-radius: 50%;

            position: relative;

        }

 得到一个带边框的圆形

再依次写子级的css样式

.z1{

            width: 300px;

            height: 600px;

            position: absolute;

            border: 1px solid red;

            border-radius: 300px 0 0 300px;

            background-color: aquamarine;

        }

        .z2{

            width: 300px;

            height: 600px;

            position: absolute;

            border: 1px solid red;

            border-radius: 0 300px 300px 0;

            left: 300px;

            background-color: rgb(82, 224, 213);

        }

此时会得到两个颜色不同的半圆，组成一个整圆，继续

.z3{

            width: 300px;

            height: 300px;

            position: absolute; //相对.f父级绝对定位

            border: 100px solid aquamarine; //将边框宽度设为100px

            background-color:rgb(82, 224, 213); //与边框样式一起，可以直接展示出圆环效果

            border-radius: 50%; //将div变成圆形

            left: 150px; //将圆环定位到上半部分

            box-sizing: border-box; //让圆的大小不受边框宽度影响

        }

此时，八卦图案基本完成，z4样式与z3样式基本相似，如下：

        .z4{

            width: 300px;

            height: 300px;

            position: absolute;

            border: 100px solid rgb(82, 224, 213);

            background-color:aquamarine;

            border-radius: 50%;

            top: 300px;

            left: 150px;

            box-sizing: border-box;

        }

至此，八卦图案完成，大小颜色可以自行改变。