css 小Demo

  

    body {
      background: pink;
    }

    .square,
    .square>div {
      box-sizing: border-box;
    }

    .square {
      width: 300px;
      position: fixed;
      top: calc(50vh - 200px);
      left: calc(50vw - 150px);
      overflow: hidden;
    }

    .square>.s-top {
      border: 1px solid #fff;
      height: 170px;
      border-radius: 5px 5px 0 0;
      border-width: 1px 1px 0 1px;
    }

    .square>.s-middle {
      border-left: 1px solid #fff;
      height: 60px;
    }

    .square>.s-bottom {
      border: 1px solid #fff;
      height: 170px;
      border-radius: 0 0 5px 5px;
      border-width: 0px 1px 1px 1px;
    }

    .square>.s-half-circle {
      border: 1px solid #fff;
      position: absolute;
      width: 30px;
      height: 60px;
      border-width: 1px 0px 1px 1px;
      border-radius: 30px 0 0 30px;
      top: calc(50% - 30px);
      right: 0;
    }

    .square>.s-background {
      border: 360px solid rgba(255, 255, 255, 0.3);
      position: absolute;
      width: 780px;
      height: 780px;
      border-radius: 50%;
      top: calc(50% - 390px);
      right: -390px;
    }

    .circle {
      width: 50px;
      height: 50px;
      border: 1px solid #fff;
      border-radius: 50%;
      position: absolute;
      top: calc(50% - 25px);
      left: calc(50% + 125px);
      background-color: rgba(255, 255, 255, .3);
      box-sizing: border-box;
    }

<div class="square">
    <div class="s-top"></div>
    <div class="s-middle"></div>
    <div class="s-bottom"></div>
    <div class="s-half-circle"></div>
    <div class="s-background"></div>
  </div>
 <div class="circle"></div>

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.