锯齿形边框一圈？ [英] Zig zag border for a circle?

查看：53 发布时间：2020/10/12 0:58:58 css css-shapes

本文介绍了锯齿形边框一圈？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

基于许多教程，我能够使用：after 和：before 。但是当涉及到圈子时，根本没有教程。


Based on many tutorials I am able to create a zig zag border for square/rectangle objects using :after and :before. However when it comes to circles there are no tutorials at all.
我想创建一个看起来像这样的对象：
I would like to create an object that looks like this:
  
仅使用CSS可能吗？
推荐答案
我会考虑将SVG旋转使用并将其用作背景。
I would consider using SVG with some rotation and use them as backgrounds.
这是尝试可以为您提供有关如何完成操作的想法。基本上，SVG是相同的，我们只需重复并旋转直到获得完整的形状。主要技巧是找到正确的值：
Here is an attempt that can give you an idea about how it can be done. Basically, the SVG is the same and we simply repeat and rotate until we get the full shape. The main trick is to find the correct values:
  
这是最终代码：
 
 
 
.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中并对其进行旋转
You can also use it as a simple SVG. In this case, you can put all the paths inside the same SVG and apply rotation to them.
在这里，我使用 calc 来计算旋转值以更好地观察模式，它们将给出相同的结果我在上一个示例中使用的值：
Here I used calc to calculate the value of rotation to better see the pattern. They will give the same values I used in the previous example:
 
 
 
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，并将其数量增加了2：
Here is another attempt with more spikes and closer to your example. I simply reduced the width of the pattern by 2 and I increased their number by two:
  
 
 
 
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>
 
 
 
您还可以轻松调整尖峰的大小。 
You can also easily adjust the size of the spikes.
  
 
 
 
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  来创建图案，但是由于它是简单的形状，我们也可以使用 多边形 使用几乎相同的语法：
As a side note, I have used path to create the pattern but since it's an easy shape we can also do it with polygon using almost the same syntax:
 
 
 
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>
 
 
 

                        这篇关于锯齿形边框一圈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

锯齿形边框一圈？ [英] Zig zag border for a circle?

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

锯齿形边框一圈？ [英] Zig zag border for a circle?

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭