这是CSS部分 *{ padding:0; margin:0; } body{ background-color:#ccc; } .content{ width:500px; height:600px; border:1px solid #F12528; background-color:#D4D4D4; margin:50px auto; } .an_header{ width:250px; height:150px; background-color:#177534; margin:20px auto; border-radius:130px 130px 0 0; position:relative; } .an_header::before, .an_header::after{ content:""; width:20px; height:20px;/* top:65px*/ background-color:#FFFFFF; position:absolute; border-radius:50%; } .an_header::before{ left:70px; top:70px } .an_header::after{ right:70px; top:70px; } .an_body{ width:250px; height:250px; top:-10px; background-color:#177534; position:relative; margin: 0auto; border-radius:00 20px 20px ; } .an_body::before, .an_body::after{ content:""; top:16px; width:25px; height:200px; border-radius:10px; background-color:#177534; position:absolute; } .an_body::before{ left:-33px; } .an_body::after{ right:-33px; } .an_footer{ width:25px; height:100px; position:relative; margin: 0auto; } .an_footer::before, .an_footer::after{ content:""; height:100px; width:25px; position:absolute; background-color:#177534; border-radius:00 10px 10px; } .an_footer::before{ left:50px; top:-10px; } .an_footer::after{ right:50px; top:-10px; }HTML部分： <div> <divclass="an_header"></div> <divclass="an_body"></div> <div></div></div>效果图：