一个圆圈的锯齿形边界？

Question

根据许多教程，我能够使用 :after 和 :before 为 square/rectangle 个对象创建锯齿形边框。但是说到圈子根本就没有教程

我想创建一个如下所示的对象：

仅使用 CSS 是否可行？

Answer 1

我会考虑使用 SVG 进行一些旋转并将它们用作背景。

这是一个可以让您了解如何完成的尝试。基本上，SVG 是一样的，我们只是重复和旋转直到我们得到完整的形状。主要技巧是找到正确的值：

这是最终代码：

.zigzag {
   width:256px;
   height:256px;
   background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(16.36deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(32.73deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(49.09deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(65.45deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(81.81deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(98.18deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(114.54deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(130.90deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(147.27deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256' style='transform:rotate(164.2deg);'> <path  d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' /></svg>");
    background-size:100% 100%;
    
    font-size:28px;
    line-height:256px;
    color:#fff;
    text-align:center;
}

body {
 background:pink;
}

<div class="zigzag">
zig zag circle
</div>

您也可以将其用作简单的 SVG。在这种情况下，您可以将所有路径放在同一个 SVG 中并对其应用旋转。

这里我使用了calc来计算旋转的值，以便更好地看到图案。他们将给出我在前面示例中使用的相同值：

svg path {
 transform-origin: 12.5% 50%;
}

svg path:nth-child(1)  { transform:rotate(calc(0*(180deg/11)));}
svg path:nth-child(2)  { transform:rotate(calc(1*(180deg/11)));}
svg path:nth-child(3)  { transform:rotate(calc(2*(180deg/11)));}
svg path:nth-child(4)  { transform:rotate(calc(3*(180deg/11)));}
svg path:nth-child(5)  { transform:rotate(calc(4*(180deg/11)));}
svg path:nth-child(6)  { transform:rotate(calc(5*(180deg/11)));}
svg path:nth-child(7)  { transform:rotate(calc(6*(180deg/11)));}
svg path:nth-child(8)  { transform:rotate(calc(7*(180deg/11)));}
svg path:nth-child(9)  { transform:rotate(calc(8*(180deg/11)));}
svg path:nth-child(10) { transform:rotate(calc(9*(180deg/11)));}
svg path:nth-child(11) { transform:rotate(calc(10*(180deg/11)));}

body {
  background: pink;
}

<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256'> 
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
</svg>

这是另一个具有更多尖峰且更接近您的示例的尝试。我只是将图案的宽度减少了 2，并将它们的数量增加了两个：

svg path {
 transform-origin: 12.5% 50%;
}

svg path:nth-child(1)  { transform:rotate(calc(0*(180deg/22)));}
svg path:nth-child(2)  { transform:rotate(calc(1*(180deg/22)));}
svg path:nth-child(3)  { transform:rotate(calc(2*(180deg/22)));}
svg path:nth-child(4)  { transform:rotate(calc(3*(180deg/22)));}
svg path:nth-child(5)  { transform:rotate(calc(4*(180deg/22)));}
svg path:nth-child(6)  { transform:rotate(calc(5*(180deg/22)));}
svg path:nth-child(7)  { transform:rotate(calc(6*(180deg/22)));}
svg path:nth-child(8)  { transform:rotate(calc(7*(180deg/22)));}
svg path:nth-child(9)  { transform:rotate(calc(8*(180deg/22)));}
svg path:nth-child(10) { transform:rotate(calc(9*(180deg/22)));}
svg path:nth-child(11) { transform:rotate(calc(10*(180deg/22)));}
svg path:nth-child(12) { transform:rotate(calc(11*(180deg/22)));}
svg path:nth-child(13) { transform:rotate(calc(12*(180deg/22)));}
svg path:nth-child(14) { transform:rotate(calc(13*(180deg/22)));}
svg path:nth-child(15) { transform:rotate(calc(14*(180deg/22)));}
svg path:nth-child(16) { transform:rotate(calc(15*(180deg/22)));}
svg path:nth-child(17) { transform:rotate(calc(16*(180deg/22)));}
svg path:nth-child(18) { transform:rotate(calc(17*(180deg/22)));}
svg path:nth-child(19) { transform:rotate(calc(18*(180deg/22)));}
svg path:nth-child(20) { transform:rotate(calc(19*(180deg/22)));}
svg path:nth-child(21) { transform:rotate(calc(20*(180deg/22)));}
svg path:nth-child(22) { transform:rotate(calc(21*(180deg/22)));}

body {
  background: pink;
}

<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256'> 
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
<path d='M40 240 L40 16 L32 0 L24 16 L24 240 L32 256 Z' />
</svg>

您还可以轻松调整尖峰的大小。

svg path {
 transform-origin: 12.5% 50%;
}

svg path:nth-child(1)  { transform:rotate(calc(0*(180deg/11)));}
svg path:nth-child(2)  { transform:rotate(calc(1*(180deg/11)));}
svg path:nth-child(3)  { transform:rotate(calc(2*(180deg/11)));}
svg path:nth-child(4)  { transform:rotate(calc(3*(180deg/11)));}
svg path:nth-child(5)  { transform:rotate(calc(4*(180deg/11)));}
svg path:nth-child(6)  { transform:rotate(calc(5*(180deg/11)));}
svg path:nth-child(7)  { transform:rotate(calc(6*(180deg/11)));}
svg path:nth-child(8)  { transform:rotate(calc(7*(180deg/11)));}
svg path:nth-child(9)  { transform:rotate(calc(8*(180deg/11)));}
svg path:nth-child(10) { transform:rotate(calc(9*(180deg/11)));}
svg path:nth-child(11) { transform:rotate(calc(10*(180deg/11)));}

body {
  background: pink;
}

<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256'> 
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
<path d='M48 220 L48 36 L32 0 L16 36 L16 220 L32 256 Z' />
</svg>

作为旁注，我使用 path to create the pattern but since it's an easy shape we can also do it with polygon 使用几乎相同的语法：

svg {
 border:1px solid;
}

<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256'> 
<path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' />
</svg>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 0 256 256' fill='orange' width='256'> 
<polygon points='48,240 48,16 32,0 16,16 16,240 32,256' />
</svg>

Answer 2

您可以创建一个带三角形的（锯齿状）圆。这个想法是创建一个刻在圆圈内的等边三角形，创建它的副本并围绕中心旋转它们。下图解释了三角形的边是如何计算的：

.circle {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #CCCCCC;
}

/*
 * triangle border left/right = 50px * cos(30°)
 * triangle border bottom = 50px + 50px * sin(30°)
 */

.triangle {
  position: absolute;
  left: 6.7px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 43.3px solid transparent;
  border-right: 43.3px solid transparent;
  border-bottom: 75px solid #BF9020;
  transform-origin: center 50px;
}

.triangle:nth-child(2) { transform: rotate(10deg); }
.triangle:nth-child(3) { transform: rotate(20deg); }
.triangle:nth-child(4) { transform: rotate(30deg); }
.triangle:nth-child(5) { transform: rotate(40deg); }
.triangle:nth-child(6) { transform: rotate(50deg); }
.triangle:nth-child(7) { transform: rotate(60deg); }
.triangle:nth-child(8) { transform: rotate(70deg); }
.triangle:nth-child(9) { transform: rotate(80deg); }
.triangle:nth-child(10) { transform: rotate(90deg); }
.triangle:nth-child(11) { transform: rotate(100deg); }
.triangle:nth-child(12) { transform: rotate(110deg); }

<div class="circle">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>

一旦你能够理解上面的例子使用下面的流畅版本:

.circle {
  width: 80vh;
  height: 80vh;
  position: relative;
  background-color: #CCCCCC;
}

.triangle {
  position: absolute;
  left: 6.7%;
  top: 0;
  width: 86.6%;
  height: 75%;
  background-color: #BF9020;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform-origin: center 66.6%;
}

.triangle:nth-child(2) { transform: rotate(10deg); }
.triangle:nth-child(3) { transform: rotate(20deg); }
.triangle:nth-child(4) { transform: rotate(30deg); }
.triangle:nth-child(5) { transform: rotate(40deg); }
.triangle:nth-child(6) { transform: rotate(50deg); }
.triangle:nth-child(7) { transform: rotate(60deg); }
.triangle:nth-child(8) { transform: rotate(70deg); }
.triangle:nth-child(9) { transform: rotate(80deg); }
.triangle:nth-child(10) { transform: rotate(90deg); }
.triangle:nth-child(11) { transform: rotate(100deg); }
.triangle:nth-child(12) { transform: rotate(110deg); }

<div class="circle">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>

Answer 3

另一个解决方案是使用 clip-path 属性:

.box {
  width: 150px;
  height: 150px;
  background: lightblue;
}

.clipped {
  clip-path: polygon(50% 0%, 46.93% 3.1%, 43.47% 0.43%, 40.83% 3.9%, 37.06% 1.7%, 34.89% 5.49%, 30.87% 3.81%, 29.21% 7.85%, 25% 6.7%, 23.89% 10.92%, 19.56% 10.33%, 19.01% 14.66%, 14.64% 14.64%, 14.66% 19.01%, 10.33% 19.56%, 10.92% 23.89%, 6.7% 25%, 7.85% 29.21%, 3.81% 30.87%, 5.49% 34.89%, 1.7% 37.06%, 3.9% 40.83%, 0.43% 43.47%, 3.1% 46.93%, 0% 50%, 3.1% 53.07%, 0.43% 56.53%, 3.9% 59.17%, 1.7% 62.94%, 5.49% 65.11%, 3.81% 69.13%, 7.85% 70.79%, 6.7% 75%, 10.92% 76.11%, 10.33% 80.44%, 14.66% 80.99%, 14.64% 85.36%, 19.01% 85.34%, 19.56% 89.67%, 23.89% 89.08%, 25% 93.3%, 29.21% 92.15%, 30.87% 96.19%, 34.89% 94.51%, 37.06% 98.3%, 40.83% 96.1%, 43.47% 99.57%, 46.93% 96.9%, 50% 100%, 53.07% 96.9%, 56.53% 99.57%, 59.17% 96.1%, 62.94% 98.3%, 65.11% 94.51%, 69.13% 96.19%, 70.79% 92.15%, 75% 93.3%, 76.11% 89.08%, 80.44% 89.67%, 80.99% 85.34%, 85.36% 85.36%, 85.34% 80.99%, 89.67% 80.44%, 89.08% 76.11%, 93.3% 75%, 92.15% 70.79%, 96.19% 69.13%, 94.51% 65.11%, 98.3% 62.94%, 96.1% 59.17%, 99.57% 56.53%, 96.9% 53.07%, 100% 50%, 96.9% 46.93%, 99.57% 43.47%, 96.1% 40.83%, 98.3% 37.06%, 94.51% 34.89%, 96.19% 30.87%, 92.15% 29.21%, 93.3% 25%, 89.08% 23.89%, 89.67% 19.56%, 85.34% 19.01%, 85.36% 14.64%, 80.99% 14.66%, 80.44% 10.33%, 76.11% 10.92%, 75% 6.7%, 70.79% 7.85%, 69.13% 3.81%, 65.11% 5.49%, 62.94% 1.7%, 59.17% 3.9%, 56.53% 0.43%, 53.07% 3.1%);
}

<div class="box clipped"></div>

如另一个答案中所述 - 棘手的部分是找出正确的值。我没有手动挑选它们 - 检查 this codepen 看看它们是如何生成的。

Answer 4

我知道 OP 只要求 CSS 解决方案，但我觉得对于这里的某些人来说，<svg> 就足够了。所以在这种情况下，您可以使用 <svg> 元素和 <polyline> ，如下所示：

<svg
   viewBox="0 0 500 500" xml:space="preserve" width="100" height="100"
  xmlns="http://www.w3.org/2000/svg">
      <polygon
        points="500,250 473.216,279.409 491.536,314.718 458.049,336.172 466.532,375.03 428.619,387.055     426.778,426.778 387.044,428.619 375.02,466.543 336.161,458.049 314.707,491.547 279.409,473.226 250,500 220.581,473.226     185.282,491.547 163.818,458.049 124.959,466.543 112.945,428.619 73.222,426.778 71.371,387.044 33.458,375.021 41.941,336.172     8.453,314.718 26.774,279.409 0,250 26.774,220.591 8.453,185.282 41.941,163.829 33.458,124.97 71.371,112.956 73.222,73.222     112.956,71.381 124.97,33.468 163.829,41.952 185.282,8.463 220.581,26.784 250,0 279.409,26.784 314.718,8.463 336.172,41.962     375.03,33.468 387.044,71.381 426.778,73.232 428.619,112.966 466.532,124.98 458.049,163.839 491.536,185.282 473.216,220.591       " style="fill:#0171a5;" />
</svg>

<div style="margin-top: 10px;">

</div>

<svg
   viewBox="0 0 500 500" xml:space="preserve" width="100" height="100"
  xmlns="http://www.w3.org/2000/svg">
      <path stroke="blue" fill="white" stroke-width="15"
        d="M 500,250 473.216,279.409 491.536,314.718 458.049,336.172 466.532,375.03 428.619,387.055     426.778,426.778 387.044,428.619 375.02,466.543 336.161,458.049 314.707,491.547 279.409,473.226 250,500 220.581,473.226     185.282,491.547 163.818,458.049 124.959,466.543 112.945,428.619 73.222,426.778 71.371,387.044 33.458,375.021 41.941,336.172     8.453,314.718 26.774,279.409 0,250 26.774,220.591 8.453,185.282 41.941,163.829 33.458,124.97 71.371,112.956 73.222,73.222     112.956,71.381 124.97,33.468 163.829,41.952 185.282,8.463 220.581,26.784 250,0 279.409,26.784 314.718,8.463 336.172,41.962     375.03,33.468 387.044,71.381 426.778,73.232 428.619,112.966 466.532,124.98 458.049,163.839 491.536,185.282 473.216,220.591 z"/>
</svg>

一个圆圈的锯齿形边界？

Zig zag border for a circle?

css

css-shapes