css大风车

css代码如下：

 1 *{
 2     margin:0;
 3     padding:0;
 4     }
 5 .div-2{
 6     width:200px;
 7     height:200px;
 8     background-color:#fff;
 9     position:absolute;
10     left:45%;
11     top:45%;
12     
13     
14     }
15     
16 ._up {
17     left:50px;
18     z-index:9;
19     position: absolute;
20     width:50px;
21     height:100px;
22        border-radius:50px 0 0 50px;
23        background:red;/* 红色*/
24     }
25 ._left{
26     top:100px;
27     z-index:6;
28     position: absolute;
29     width:100px;
30     height:50px;
31     border-radius:0 0 50px 50px;
32     background-color:#F7FD00;/* 黄色*/
33     }
34 ._right{
35     left:100px;
36     top:50px;
37     z-index:7;
38     position: absolute;
39     width:100px;
40     height:50px;
41     border-radius:50px 50px 0 0;
42     background-color:#003CFD;/* 蓝色*/
43     }
44 ._down{
45     top:100px;
46     left:100px;
47     z-index:8;
48     position: absolute;
49     width:50px;
50     height:100px;
51     border-radius:0 50px 50px 0;
52     background-color:#02FB54; /* 绿色*/
53     }

html代码：

 1 <div class="div-2">
 2             <div class="_up">
 3                 
 4              </div>
 5             
 6             <div class="_left">
 7                 
 8             </div>
 9             
10             <div class="_right">
11                 
12             </div>
13             
14             <div class="_down">
15                   
16             </div>
17     
18     
19     </div>

效果图：