如何围绕一个圆创建 "sun like" 条线？

Question

我基本上需要在图像中创建这个设计。我知道可以用 CSS 来实现，但我不知道该怎么做。我正在尝试谷歌搜索，但我只能找到像这个这样的精心设计的“太阳”设计，对于我目前的理解来说，这对我来说太多了，无法分解。

我创建了这样的中心部分（使用 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>

为了获得更好的支持，您可以将锥形渐变替换为多个线性渐变，但控制光线数量的灵活性会降低：

.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

在 codepen 中，光线是通过使用具有 position: absolute 的多个 div's 创建的，并使用 transform:rotate() 属性.[=20 旋转=]

这一切都可以放在一个 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">，但可以相应地对其进行风格化。

如何围绕一个圆创建 "sun like" 条线？

How can I create "sun like" lines around a circle?

css

css-shapes