.wbhz { box-sizing:border-box; border:10px solid red; border-top-left-radius:80px; border-top-right-radius:80px; width:160px; height:80px; border-bottom:none; } .d1 { position:relative; top:-80px; z-index:10; height:80px; width:160px; border:10px solid yellow; box-sizing:border-box; border-top-left-radius:80px; border-top-right-radius:80px; border-bottom:none; transform-origin:50% 100%; transform:rotate(-180deg); transition:all 1s; } .whz { width:160px; height:80px; overflow:hidden; position:relative; } .fzsj { height:60px; text-align:center; position:absolute; top:20px; left:0; width:100%; } .dwy { width:16px; height:16px; border-radius:50%; background:chartreuse; position:absolute; right:-13px; bottom:-3px; }