Вы можете попробовать, используя conic-gradient
и mask
, как показано ниже
.box {
--s:20px; /* length */
--o:10px; /* offset */
--w:6deg; /* thickness */
--n:8; /* numbers*/
--c:green;/* color */
margin:calc(var(--s) + var(--o) + 10px);
width:100px;
height:100px;
display:inline-block;
border:2px solid red;
border-radius:50%;
position:relative;
}
.box::before {
content:"";
position:absolute;
top: calc(-1*var(--s) - var(--o));
bottom: calc(-1*var(--s) - var(--o));
left: calc(-1*var(--s) - var(--o));
right: calc(-1*var(--s) - var(--o));
border-radius:inherit;
background:repeating-conic-gradient(from calc(-1*var(--w)/2), var(--c) 0 calc(var(--w) - 2deg),transparent calc(var(--w)) calc(360deg/var(--n) - 2deg),var(--c) calc(360deg/var(--n)));
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--s)),#fff calc(100% - var(--s)));
mask:radial-gradient(farthest-side,transparent calc(100% - var(--s)),#fff calc(100% - var(--s)));
}
body {
background: #000;
}
<div class="box"></div>
<div class="box" style="--s:30px;--o:5px;--n:10;--c:yellow;--w:4deg"></div>
<div class="box" style="--s:15px;--o:20px;--n:6;--c:blue;--w:10deg"></div>

Для лучшей поддержки вы можете заменить кони c -градиент на несколько линейных- градиент, но у вас будет меньше возможностей контролировать количество лучей:
.box {
--s:20px; /* length */
--o:10px; /* offset */
--c:green; /* color */
--w:4px; /* thickness*/
--grad:transparent calc(50% - var(--w)/2),
var(--c) calc(50% - var(--w)/2 + 1px)
calc(50% + var(--w)/2 - 1px),
transparent calc(50% + var(--w)/2);
margin:calc(var(--s) + var(--o) + 10px);
width:100px;
height:100px;
display:inline-block;
border:2px solid red;
border-radius:50%;
position:relative;
}
.box::before {
content:"";
position:absolute;
top: calc(-1*var(--s) - var(--o));
bottom: calc(-1*var(--s) - var(--o));
left: calc(-1*var(--s) - var(--o));
right: calc(-1*var(--s) - var(--o));
border-radius:inherit;
background:
/* 8 rays */
linear-gradient(0deg ,var(--grad)),
linear-gradient(45deg ,var(--grad)),
linear-gradient(-45deg ,var(--grad)),
linear-gradient(90deg ,var(--grad));
/* */
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--s)),#fff calc(100% - var(--s)));
mask:radial-gradient(farthest-side,transparent calc(100% - var(--s)),#fff calc(100% - var(--s)));
}
body {
background: #000;
}
<div class="box"></div>
<div class="box" style="--s:30px;--o:5px;--c:yellow;--w:8px"></div>
<div class="box" style="--s:15px;--o:20px;--c:blue;--w:10px"></div>

И если вы хотите учесть радиус границы для луча, вот идея с SVG. Здесь вам нужно будет вручную настраивать SVG каждый раз, когда вы хотите иметь другой цвет, толщину или радиус:
.box {
--s:20px; /* length */
--o:10px; /* offset */
--grad:transparent calc(50% - var(--w)/2),
var(--c) calc(50% - var(--w)/2 + 1px)
calc(50% + var(--w)/2 - 1px),
transparent calc(50% + var(--w)/2);
margin:calc(var(--s) + var(--o) + 10px);
width:100px;
height:100px;
display:inline-block;
border:2px solid red;
border-radius:50%;
position:relative;
}
.box::before {
content:"";
position:absolute;
top: calc(-1*var(--s) - var(--o));
bottom: calc(-1*var(--s) - var(--o));
left: calc(-1*var(--s) - var(--o));
right: calc(-1*var(--s) - var(--o));
border-radius:inherit;
background:
/* 8 rays */
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' style='transform:rotate(0deg);'> <rect x='118' y='0' width='20' height='100%' rx='10' ry='10' fill='green' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' style='transform:rotate(45deg);'> <rect x='118' y='0' width='20' height='100%' rx='10' ry='10' fill='green' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' style='transform:rotate(-45deg);'> <rect x='118' y='0' width='20' height='100%' rx='10' ry='10' fill='green' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' style='transform:rotate(90deg);'> <rect x='118' y='0' width='20' height='100%' rx='10' ry='10' fill='green' /></svg>");
/* */
background-size:100% 100%;
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--s)),#fff calc(100% - var(--s)));
mask:radial-gradient(farthest-side,transparent calc(100% - var(--s)),#fff calc(100% - var(--s)));
}
body {
background: #000;
}
<div class="box"></div>
<div class="box" style="--s:30px;--o:5px;"></div>
<div class="box" style="--s:15px;--o:20px;"></div>

Окончательная идея без маски, SVG и сложного градиента, но с множеством элементов:
.box {
--s:20px; /* length */
--o:10px; /* offset */
--w:6px; /* thickness */
--c:green;/* color */
margin:calc(var(--s) + var(--o) + 10px);
width:100px;
height:100px;
display:inline-block;
border:2px solid red;
border-radius:50%;
position:relative;
}
.box span{
content:"";
position:absolute;
width:var(--w);
left:50%;
top: calc(-1*var(--s) - var(--o));
bottom: calc(-1*var(--s) - var(--o));
border-radius:5px;
background:
linear-gradient(var(--c),var(--c)) top,
linear-gradient(var(--c),var(--c)) bottom;
background-size:100% var(--s);
background-repeat:no-repeat;
transform:translate(-50%) rotate(var(--r,0deg));
}
.box span:nth-child(2) { --r:45deg; }
.box span:nth-child(3) { --r:-45deg; }
.box span:nth-child(4) { --r:90deg; }
body {
background: #000;
}
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="box" style="--s:30px;--o:5px;--c:yellow;--w:4px">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="box" style="--s:15px;--o:20px;--c:blue;--w:10px">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
