今天在群里有人問了一個問題就是如何做出：一個輪盤上的按鈕，類似於：
后來經過講解，發現這個東西是可以通過translate中的ratate來做的，基本思路先確定下來：
1.首先在最外層套一個div，在將為其設置border-radius；
2.再將圖形分成兩塊，left和right，並且為其添加overflow：hidden
3.在left中創建4個小div，並且為其賦上特定的顏色，最后在分別將其旋轉0，45，90，135
4.right同理；
最后附上源碼：
<head> <title>CSS等分圓</title> <meta charset="utf-8"> <style type="text/css"> .circle-left{ width: 100px;height: 200px; border-radius: 0px 100px 100px 0px; position: absolute; right: 0; transform-origin: 0 50%; } .circle-right{ width: 100px;height: 200px; border-radius: 100px 0px 0px 100px ; position: absolute; right: 0; transform-origin: 100% 50%; } #circle0{ width: 200px;height: 200px; border-radius: 100px; background-color: yellowgreen; position: relative; } #circle2{ background-color: #70f3ff; } #circle3{ background-color: #ff461f; transform: rotate(45deg); } #circle4{ background-color: #bce672; transform: rotate(90deg); } #circle5{ background-color: #ffffff; transform: rotate(135deg); } #circle6{ background-color: #3b2e7e; transform: rotate(225deg); } #circle7{ background-color: #ff2121; transform: rotate(270deg); } #circle8{ background-color: #16a951; transform: rotate(315deg); } #circle9{ background-color: #e0eee8; } #left{ clip: rect(0px 100px 200px 0px); position: absolute; right: 0px; width: 100px; height: 200px; overflow: hidden; } #right{ clip: rect(0px 100px 200px 0px); position: absolute; left: 0px; width: 100px; height: 200px; overflow: hidden; } .occlusion { position: absolute; top: 50%; left: 50%; transform: translate(-50px, -50px); background-color: skyblue; width: 100px; height: 100px; border-radius: 50%; } </style> </head> <body> <div id="circle0"> <div id="left"> <div class="circle-left" id="circle2"></div> <div class="circle-left" id="circle3"></div> <div class="circle-left" id="circle4"></div> <div class="circle-left" id="circle5"></div> </div> <div id="right"> <div class="circle-right" id="circle9"></div> <div class="circle-right" id="circle8"></div> <div class="circle-right" id="circle7"></div> <div class="circle-right" id="circle6"></div> </div> <div class="occlusion"></div> </div> </body>