SOURCE

console 命令行工具 X clear

                    
>
console
.container
  .outer-circle
  .center-stroke
  .inner-wrapper
    .s-curve-wrapper
      .s-curve
    .s-horizontal
    .s-vertical-top
    .s-vertical-bottom
    .m-curve
    .m-left
    .m-right
    .m-center
$background: #fff;
$foreground: #000;

$stroke-width: 7.5; // I could've measured this but I didn't lol
$stroke-spacing: (50 - (4.5 * $stroke-width)) / 4;

html{
  font-size: 0.8vh;
  @media screen and (max-aspect-ratio: 1/1){
    font-size: 0.8vw;
  }
  // using rem as an easy custom-sized unit that guarantees everything scales correctly to the viewport size
  margin:0;
  padding:0;
}
body{
  margin:0;
  padding:0;
  height: 100vh;
  width: 100vw;
  background: $background;
  overflow:hidden;
}

.container{
  width: 100rem;
  height: 100rem;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  *{
    position: absolute;
    box-sizing: border-box;
  }
  
  border-radius: 50%;
  overflow: hidden;
}

.outer-circle{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: #{$stroke-width}rem solid $foreground;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    #{50% + 0.5% * $stroke-width + $stroke-spacing} 100%,
    #{50% + 0.5% * $stroke-width + $stroke-spacing} 50%,
    #{50% - 0.5% * $stroke-width - $stroke-spacing} 50%,
    #{50% - 0.5% * $stroke-width - $stroke-spacing} 100%,
    0% 100%
  );
}

.center-stroke{
  top: 0;
  bottom:0;
  background: $foreground;
  width: #{$stroke-width}rem;
  left: 50%;
  transform: translateX(-50%);
}

.inner-wrapper{
  top: #{$stroke-width + $stroke-spacing}rem;
  bottom: #{$stroke-width + $stroke-spacing}rem;
  left: #{$stroke-width + $stroke-spacing}rem;
  right: #{$stroke-width + $stroke-spacing}rem;
  border-radius:50%;
  overflow: hidden;
}

.s-curve-wrapper{
  top:0;
  left:0;
  bottom:0;
  right:0;
  clip-path: inset(0rem calc(50% + #{0.5 * $stroke-width + $stroke-spacing}rem) 0rem 0rem);
}

.s-curve{
  top:0;
  left:0;
  bottom:0;
  right:0;
  border-radius: 50%;
  border: #{$stroke-width}rem solid $foreground;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 50%,
    0% 50%,
    0% calc(50% + #{$stroke-width}rem),
    100% calc(50% + #{$stroke-width}rem),
    100% 100%,
    0% 100%
  );
}

.s-horizontal{
  background: $foreground;
  bottom: 50%;
  left: 0;
  right: calc(50% + #{(0.5 * $stroke-width + $stroke-spacing)}rem);
  height: #{$stroke-width}rem;
}

.s-vertical-top{
  background: $foreground;
  right: calc(50% + #{(0.5 * $stroke-width + $stroke-spacing)}rem);
  width: #{$stroke-width}rem;
  top: 0;
  bottom: calc(50% + #{2 * $stroke-width}rem);
}

.s-vertical-bottom{
  background: $foreground;
  right: calc(50% + #{(0.5 * $stroke-width + $stroke-spacing)}rem);
  width: #{$stroke-width}rem;
  top: calc(50% - 1rem); // overlap to prevent gapping in render
  bottom: 0;
}


.m-curve{
  top:0;
  left:0;
  bottom:0;
  right:0;
  border-radius: 50%;
  border: #{$stroke-width}rem solid $foreground;
  clip-path: inset(0rem 0rem 50% calc(50% + #{0.5 * $stroke-width + $stroke-spacing}rem));
}

.m-left{
  top:0;
  right:0;
  bottom:0;
  width: calc(50% - #{(0.5 * $stroke-width) + $stroke-spacing}rem);
  border-left: #{$stroke-width}rem solid $foreground;
}

.m-right{
  top:0;
  right:0;
  bottom:0;
  width: calc(50% - #{(0.5 * $stroke-width) + $stroke-spacing}rem);
  border-right: #{$stroke-width}rem solid $foreground;
}

.m-center{
  top:0;
  right:0;
  bottom:0;
  width: calc(50% - #{(0.5 * $stroke-width) + $stroke-spacing}rem);
  background: $foreground;
  clip-path: inset(0rem #{$stroke-spacing + $stroke-width}rem 0rem #{$stroke-spacing + $stroke-width}rem);
}