css3 怎么画这个拱形图

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title>  <style>    body {      padding: 100px;    }    .box {      width: 300px;      height: 200px;      position: relative;      overflow: hidden;    }    .box .c1 {      width: 500px;      height: 500px;      background: #0f0;      border-radius: 50%;      left: -100px;      top: 0;      position: absolute;    }    .box .c2 {      width: 1500px;      height: 1500px;      background: #fff;      border-radius: 50%;      left: -600px;      top: 80%;      position: absolute;    }  </style></head><body>  <div class="box">    <div class="c1"></div>    <div class="c2"></div>  </div></body></html>css3不熟悉，好歹效果有点像，哈哈

css3 怎么画这个拱形图

1回答