<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .hold{position:absolute;width:200px;height:200px;} .outer{position:absolute;width:200px;height:200px;transform:rotate(225deg);clip:rect(0px,100px,200px,0px);border-radius:100px;background:yellow;} .pie{position:absolute;width:200px;height:200px;transform:rotate(180deg) !important;clip:rect(0px,100px,200px,0px);border-radius:100px;background:yellow;} .left{position:absolute;width:200px;height:200px;transform:rotate(135deg);clip:rect(auto,auto,auto,auto);border-radius:100px;} .leftadd{position:absolute;width:200px;height:200px;transform:rotate(180deg) !important;clip:rect(0px,100px,200px,0px);border-radius:100px;background:red;} .add{position:absolute;width:200px;height:200px;transform:rotate(225deg) !important;clip:rect(0px,100px,200px,0px);border-radius:100px;background:red;}
</style> </head> <body> <div class="hold" style="margin:100px 0 0 200px;"> <div class="outer"></div> <div class="pie"></div> </div> <div class="left" style="margin:320px 0 0 200px;"> <div class="add"></div> <div class="leftadd"></div> </div> </body> </html>
效果图：
