太极css样式

使用boeder-radius

```css
  <style>
        *{
            margin:0;
            padding:0;
        }
       .cricle{
            width:400px;
            height:400px;
            margin:120px auto;
            background-color:#fff;
            border:2px solid black;
            margin:auto;
            border-radius:300px;
        }
        ul{
            list-style:none;
        }
        .cricleone{
            width:200px;
            height:400px;
            background-color:black;
            border-radius:200px 0px 0px 200px;
            margin-left:0px;
            margin-top:0px;
        }
        .cricletwo{
            width:100px;
            height:200px;
            background:black;
            margin-left:200px;
            margin-top:-200px;
            border-radius:0px 100px 100px 0px;
        }
        .criclethird{
            width:100px;
            height:200px;
            background:#fff;
            margin-left:100px;
            margin-top:-400px;
            border-radius:100px 0px 0px 100px;
        }
        .criclefour{
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:#fff;
            margin-left:200px ;
            margin-top:85px;
        }
        .criclefiv{
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:black;
            margin-left:200px ;
            margin-top:-250px;
        }

    </style>在这里插入代码片`
    **HTML**
```css
<div class="cricle" >
        <ul>
            <li class="cricleone"></li>
            <li class="cricletwo"></li>
            <li class="criclethird"></li>
            <li class="criclefour"></li>
            <li class="criclefiv"></li>
        </ul>
    </div>