Как я могу создать линии, похожие на солнце, вокруг круга, как в этом примере?

Question

Мне в основном нужно создать этот дизайн на изображении. Я знаю, что это можно сделать с помощью CSS, но я не уверен, как это сделать. Я пробовал погуглить, но могу найти только замысловатые "солнечные" рисунки, такие как этот, что для меня слишком много, чтобы сломать его для моего текущего понимания.

https://codepen.io/zmmbreeze/pen/guLfC

Я создал центральную часть вот так (используя sass):

  &__count {
    width: 12rem;
    height: 12rem;
    color: $lightPurple;
    border: $border;
    font-size: 4rem;
    font-weight: 500;
    border-radius: 100%;
    @include centerContent;
  }

Как мне добавить «лучи»?

Это то, что у меня пробовал извлечь:

.count-down {
  position: relative;
  margin: auto;
  @include centerContent;
  &__count {
    width: 12rem;
    height: 12rem;
    color: $lightPurple;
    border: $border;
    font-size: 4rem;
    font-weight: 500;
    border-radius: 100%;
    @include centerContent;
  }

  &__go {
    width: 15rem;
    height: 15rem;
    color: white;
    border: 1px solid white;
    font-size: 4rem;
    font-weight: 500;
    border-radius: 100%;
    @include centerContent;
  }
}

.sun-light b,
.sun-light s {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12%; /* 100*30/100=18.75 */
  background: #fed65b;
}
.sun-light s {
  top: auto;
  bottom: 0;
}
.sun-light:nth-child(10n + 2) {
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  -ie-transform: rotate(18deg);
  transform: rotate(18deg);
}
.sun-light:nth-child(10n + 3) {
  -webkit-transform: rotate(36deg);
  -moz-transform: rotate(36deg);
  -o-transform: rotate(36deg);
  -ie-transform: rotate(36deg);
  transform: rotate(36deg);
}
.sun-light:nth-child(10n + 4) {
  -webkit-transform: rotate(54deg);
  -moz-transform: rotate(54deg);
  -o-transform: rotate(54deg);
  -ie-transform: rotate(54deg);
  transform: rotate(54deg);
}
.sun-light:nth-child(10n + 5) {
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  -ie-transform: rotate(72deg);
  transform: rotate(72deg);
}
.sun-light:nth-child(10n + 6) {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ie-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sun-light:nth-child(10n + 7) {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  -ie-transform: rotate(108deg);
  transform: rotate(108deg);
}
.sun-light:nth-child(10n + 8) {
  -webkit-transform: rotate(126deg);
  -moz-transform: rotate(126deg);
  -o-transform: rotate(126deg);
  -ie-transform: rotate(126deg);
  transform: rotate(126deg);
}
.sun-light:nth-child(10n + 9) {
  -webkit-transform: rotate(144deg);
  -moz-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  -ie-transform: rotate(144deg);
  transform: rotate(144deg);
}
.sun-light:nth-child(10n + 10) {
  -webkit-transform: rotate(162deg);
  -moz-transform: rotate(162deg);
  -o-transform: rotate(162deg);
  -ie-transform: rotate(162deg);
  transform: rotate(162deg);
}

А это мой компонент (React. js):

<div className="count-down">
  {timeToStart > 1 ? (
    <div className="count-down__count">{Math.floor(timeToStart)}</div>
  ) : (
    <div className="count-down__go">Go!</div>
  )}

  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
</div>

Но почему-то получаю такой результат:

Answer 1

Вы можете попробовать, используя 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>

Answer 2

В коде лучи создаются с использованием нескольких div's, которые имеют position: absolute и вращаются с использованием свойства transform:rotate().

Все это может быть помещено в container div, который может иметь position: relative для простоты развертывания.

Вы также отсутствовали

.sun-light {
    position: absolute;
    left: 50%;
    width: 5px;
    height: 60%;    /*For Radius Variation*/
}

Применяя все это, я создал простой фрагмент:

.container{
    height: 600px;    /* Vary this for changing the size of the entire sun WRT the container */
    position: relative;
    background: grey;
}

.container_go {
    width: 15rem;    /*Would be recommended to provide a unit relative to div*/
    height: 15rem;
    color: white;
    border: 1px solid white;
    font-size: 4rem;
    font-weight: 500;
    border-radius: 100%;

    /* Added CSS */
    position: absolute;
    top: 12%;
    left: 0;
    right: 0;
    margin: auto;
    /* For aligning text in center */
    text-align: center;
    line-height: 15rem;
}

.sun-light {
    position: absolute;
    left: 50%;
    width: 5px;
    height: 60%;    /*For Radius Variation*/
}

/* For design of rays*/
.sun-light b,
.sun-light s {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12%;    /* 100*30/100=18.75 */
    background: #fed65b;
}
.sun-light s{
    top: auto;
    bottom: 0;
}

/* The actual way to get the rays */
   .sun-light:nth-child(3) {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ie-transform:rotate(90deg);
    transform:rotate(90deg);
}

.sun-light:nth-child(1) {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ie-transform:rotate(180deg);
    transform:rotate(180deg);
}
.sun-light:nth-child(2) {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ie-transform:rotate(45deg);
    transform:rotate(45deg);
}
.sun-light:nth-child(4) {
    -webkit-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -o-transform:rotate(135deg);
    -ie-transform:rotate(135deg);
    transform:rotate(135deg);
}

<div class="container">
This is the main object container.

  <div class="container_go">
    GO
  </div>

  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
  <div class="sun-light">
    <b></b>
    <s></s>
  </div>
</div>

Я избегал <div className="count-down__count"> для простоты, но его можно соответственно стилизовать.