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>