.box{--r:50px;--s:40px;--a:50deg;--_m:0/calc(2*var(--r))calc(2*var(--r))no-repeat radial-gradient(50% 50%,#000 calc(100% - 1px),#0000);--_d:(var(--s) + var(--r))*cos(var(--a));height:128px;-webkit-mask:calc(50% + var(--_d))var(--_m),calc(50% - var(--_d))var(--_m),radial-gradient(var(--s)at 50% calc(-1*sin(var(--a))*var(--s)),#0000 100%,#000 calc(100% + 1px))0 calc(var(--r)*(1 - sin(var(--a))))no-repeat,linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);mask:calc(50% + var(--_d))var(--_m),calc(50% - var(--_d))var(--_m),radial-gradient(var(--s)at 50% calc(-1*sin(var(--a))*var(--s)),#0000 100%,#000 calc(100% + 1px))0 calc(var(--r)*(1 - sin(var(--a))))no-repeat,linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0)}.bottom{--_m:100%/calc(2*var(--r))calc(2*var(--r))no-repeat radial-gradient(50% 50%,#000 calc(100% - 1px),#0000);-webkit-mask:calc(50% + var(--_d))var(--_m),calc(50% - var(--_d))var(--_m),radial-gradient(var(--s)at 50% calc(100% + sin(var(--a))*var(--s)),#0000 100%,#000 calc(100% + 1px))0 calc(var(--r)*(sin(var(--a)) - 1))no-repeat,linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);mask:calc(50% + var(--_d))var(--_m),calc(50% - var(--_d))var(--_m),radial-gradient(var(--s)at 50% calc(100% + sin(var(--a))*var(--s)),#0000 100%,#000 calc(100% + 1px))0 calc(var(--r)*(sin(var(--a)) - 1))no-repeat,linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0)}