Welcome to CODEBOX! (Copy 2113)
✨ นายกฤติน กลิ่นแก้ว
<html> <head> <title>Let's Start </title> <style> @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); body{ font-family: 'Itim', sans-serif; display:flex; justify-content: center; height:100vh; overflow:hidden; background: #299; background-size: cover; } .mainbox{ position: relative; width:500px; height:500px; } .box{ width:100%; height:100%; position:relative; border-radius:50%; border: 10px solid #fff; overflow:hidden; } span{ width:50%; height:50%; display:inline-block; position:absolute; } .span1{ clip-path: polygon(0 92%, 100% 50%, 0 8%); background-color: yellow; top:125px; left:0; } .span2{ clip-path: polygon(100% 92%, 0 50%, 100% 8%); background-color: red; top:125px; right:0; } .span3{ clip-path: polygon(50% 0%, 8% 100%, 92% 100%); background-color: green; bottom:0; left:125px; } .span4{ clip-path: polygon(50% 100%, 92% 0, 8% 0); background-color: violet; top:0px; left:125px; } .box2{ width:100%; height:100%; transform:rotate(135deg); } span b{ width:65px; height:65px; line-height: 65px; border-radius:50%; font-size:26px; text-align:center; background-color:#fff; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%) box-shadow: insert 0 3px 3px 0 #717171; } </style> </head> <body> <div class="mainbox"> <div class="box"> <div class="box1"> <span class="span1"><b>50</b></span> <span class="span2"><b>150</b></span> <span class="span3"><b>200</b></span> <span class="span4"><b>250</b></span> </div> <div class="box2"> <span class="span1"><b>300</b></span> <span class="span2"><b>350</b></span> <span class="span3"><b>450</b></span> <span class="span4"><b>550</b></span> </div> </div> </div> </body> </html>