Zig zag border for a circle?

  • A+
Category:Languages

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:

Zig zag border for a circle?

Is that possible by using CSS only?

 


I would consider using SVG with some rotation and use them as backgrounds.

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:

Zig zag border for a circle?

.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>

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.

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>

Here is another example with more stripes and closer to your example:

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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: