How does css3 draw this arch?

clipboard.png
how does css3 draw this arch

Css
Mar.25,2021

<!DOCTYPE html>
<html lang="en">
<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: -sharp0f0;
      border-radius: 50%;
      left: -100px;
      top: 0;
      position: absolute;
    }
    .box .c2 {
      width: 1500px;
      height: 1500px;
      background: -sharpfff;
      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 is not familiar, at least the effect is similar,

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b38424-2c0de.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b38424-2c0de.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?