Css 一个圆的之字形边界？

基于许多教程，我能够使用

：after

和

：before

为方形/矩形对象创建之字形边框。然而，当涉及到圆圈时，根本没有教程

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

---

只有使用CSS是可能的吗？

< P>我会考虑使用SVG进行旋转，并使用它们作为背景。 这里有一个尝试，可以给你一个如何做到这一点的想法。基本上，SVG是相同的，我们只是重复和旋转，直到得到完整的形状。主要技巧是找到正确的值：

以下是最终代码：

.zigzag{
宽度：256px；
高度：256px；
背景：
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”），
url（“数据：image/svg+xml；utf8，”）；
背景大小：100%100%；
字号：28px；
线高：256px；
颜色：#fff；
文本对齐：居中；
}
身体{
背景：粉红色；
}

锯齿形圆

您可以创建一个带有三角形的（锯齿状）圆。其思想是创建一个内接在圆内的等边三角形，创建其副本并围绕圆心旋转。下图说明了如何计算三角形的边：

.circle{
宽度：100px；
高度：100px；
位置：相对位置；
背景色：#中交；
}
/*
*三角形边框左/右=50px*cos（30°）
*三角形边框底部=50px+50px*sin（30°）
*/
.三角形{
位置：绝对位置；
左：6.7px；
排名：0；
宽度：0；
身高：0；
左边框：43.3px实心透明；
右边框：43.3px实心透明；
边框底部：75px实心#BF9020；
变换原点：中心50px；
}
.三角形：第n个子（2）{变换：旋转（10度）；}
.三角形：第n个子（3）{变换：旋转（20度）；}
.三角形：第n个子（4）{变换：旋转（30度）；}
.三角形：第n个子（5）{变换：旋转（40度）；}
.三角形：第n个子（6）{变换：旋转（50度）；}
.三角形：第n个子（7）{变换：旋转（60度）；}
.三角形：第n个子（8）{变换：旋转（70度）；}
.三角形：第n个子（9）{变换：旋转（80度）；}
.三角形：第n个子（10）{变换：旋转（90度）；}
.三角形：第n个子（11）{变换：旋转（100度）；}
.三角形：第n个子（12）{变换：旋转（110度）；}

---

另一种解决方案是使用

剪辑路径

属性：

.box{
宽度：150px；
高度：150像素；
背景：浅蓝色；
}
.剪短{
剪辑路径：多边形(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%);
}

---

同意。在CSS中这样做没有任何理由。在CSS中可能会这样做（可能使用与此答案中的SVG类似的技术），但这肯定不容易实现或维护。CSS不是答案：浏览器有很好的SVG支持；使用它。@Spudley尝试仅使用CSS的唯一理由是具有挑战性的部分；）我们可能会以疯狂的代码结束，但学习更多CSS技巧可能是一个很好的练习。但这一次，我没有发现那个疯狂的代码：p“学习更多CSS技巧”：为什么要费心学习一些你在现实生活中无法使用的东西？如果你使用它们，你会制造一个怪物来保持最好的状态。所以，让我们不要为欺骗而烦恼。@swa66在现实世界中你不需要使用它们。。当老师给我们布置作业和解决问题时，我们不会在现实世界中使用它们。我们将学习一个新的技巧，我们可以在其他地方使用。。。如果我们只学习我们将在现实世界中使用的东西，那么我们将学到一点。诡计会让我们的大脑思考如何解决现实世界中可能遇到的问题。@swa66这是你的观点。检查这个问题的所有答案，看看使用了哪些技巧：变换、SVG、剪辑路径、多背景、一些数学等等。。。所以，尝试用CSS解决这个问题，你会学到所有这些东西，你可以单独或一起使用。它不仅仅是学习如何创建这个形状，而是学习背后的技术。我们可以很容易地建立这样的形状使用Photoshop，然后添加它作为背景。很简单，但我们的知识没有新的增加。可能是重复的