dont add html
dont use body in css
dont change the parent position which is fixed(and i want the main color on top to stay the same too!)
dd1 and dd2 is the example
dd3 is what i want to make which is without accepting the above rules
no border suggetion
no js
and if u could please solve the 3rd one dd3 cause what to do so it would be possible to add overflow without changing the ::before

dont add html
dont use body in css
dont change the parent position which is fixed(and i want the main color on top to stay the same too!)
dd1 and dd2 is the example
dd3 is what i want to make which is without accepting the above rules
no border suggetion
no js
and if u could please solve the 3rd one dd3 cause what to do so it would be possible to add overflow without changing the ::before

.test-conic::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: conic-gradient(
          from 280deg at 50% 50%,
          purple 10deg,
          transparent 10deg
        );
        inset: -8px;
        padding: 8px;
        z-index: -5;
      }

.test-conic::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: conic-gradient(
          from 280deg at 50% 50%,
          purple 10deg,
          transparent 10deg
        );
        inset: -8px;
        padding: 8px;
        z-index: -5;
      }

.test-conic{
        width: 200px ;
        aspect-ratio: 1/1 ;
        position: relative ;
        background-color: black;
        border: red solid 3px;
        inset: 15px;
      }

.test-conic{
        width: 200px ;
        aspect-ratio: 1/1 ;
        position: relative ;
        background-color: black;
        border: red solid 3px;
        inset: 15px;
      }