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>
效果图: