Wavy border css for a circle
2
Is there a way we could get a wavy background for a circle.
I could get the circle shape with ease, but not sure how we could get the border like in the given pic.
<div class="circle-wave">
</div>
.circle-wave {
cursor: pointer;
height: 50px;
width: 50px;
border-radius: 50%;
}
css css3
asked Jan 19 at 18:35
TBATBA
38931746
add a comment |
2
Is there a way we could get a wavy background for a circle.
I could get the circle shape with ease, but not sure how we could get the border like in the given pic.
<div class="circle-wave">
</div>
.circle-wave {
cursor: pointer;
height: 50px;
width: 50px;
border-radius: 50%;
}
css css3
asked Jan 19 at 18:35
TBATBA
38931746
Nope. You can’t do that with CSS. You will have to use SVG to draw that kind of shape/path.
– Terry
Jan 19 at 18:41
add a comment |
2
2
2
Is there a way we could get a wavy background for a circle.
I could get the circle shape with ease, but not sure how we could get the border like in the given pic.
<div class="circle-wave">
</div>
.circle-wave {
cursor: pointer;
height: 50px;
width: 50px;
border-radius: 50%;
}
css css3
asked Jan 19 at 18:35
TBATBA
38931746
Is there a way we could get a wavy background for a circle.
I could get the circle shape with ease, but not sure how we could get the border like in the given pic.
<div class="circle-wave">
</div>
.circle-wave {
cursor: pointer;
height: 50px;
width: 50px;
border-radius: 50%;
}
css css3
css css3
asked Jan 19 at 18:35
TBATBA
38931746
asked Jan 19 at 18:35
TBATBA
38931746
asked Jan 19 at 18:35
TBATBA
38931746
asked Jan 19 at 18:35
TBATBA
38931746
asked Jan 19 at 18:35
TBATBA
38931746
38931746
Nope. You can’t do that with CSS. You will have to use SVG to draw that kind of shape/path.
– Terry
Jan 19 at 18:41
add a comment |
Nope. You can’t do that with CSS. You will have to use SVG to draw that kind of shape/path.
– Terry
Jan 19 at 18:41
Nope. You can’t do that with CSS. You will have to use SVG to draw that kind of shape/path.
– Terry
Jan 19 at 18:41
Nope. You can’t do that with CSS. You will have to use SVG to draw that kind of shape/path.
– Terry
Jan 19 at 18:41
add a comment |
1 Answer
1
active
oldest
votes
4
Based on a previous answer where I created something similar zig-zag-border-for-a-circle you can do some adjustement to have this layout. Basically, I added stroke to the SVG element then I added a radial gradient to cover the non needed part. By the way it's a solution without transparency.
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(#fff 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(16.36deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(32.73deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(49.09deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(65.45deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(81.81deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(98.18deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(114.54deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(130.90deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(147.27deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(164.2deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>");
background-size:100% 100%;
display:inline-block;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>If you want transparency you can modify the SVG element to only keep two triangle at the top and the bottom like this:
svg {
stroke: red;
stroke-width: 3px;
fill: transparent;
border: 1px solid;
}
svg polygon:first-child {
stroke-dasharray: 45, 35;
}
svg polygon:last-child {
stroke-dasharray: 45, 35;
stroke-dashoffset: -32;
}<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256'>
<polygon points='48,16 32,0 16,16' />
<polygon points='48,240 16,240 32,256' />
</svg>Then simply integrate it to the background:
.zigzag {
width:256px;
height:256px;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>Here is with a coloration inside:
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(orange 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>answered Jan 19 at 19:35
Temani AfifTemani Afif
71.1k93878
that is a nice way of doing it! Very informative.
– HypeWolf
Jan 19 at 19:36
Thank you so much :) Very helpful ..
– TBA
Jan 19 at 20:01
@TBA welcome, by the way you can still wait. We are a saturday and you will probably get more ideas ;) [I will also try to edit with a transparent solution]
– Temani Afif
Jan 19 at 20:02
1
@TBA I have updated with a transparent solution
– Temani Afif
Jan 19 at 21:40
@TemaniAfif One more doubt If I want to color only the background part of the waved circle is it possible. unfortunately I get the color in a Hex value. So I could set something like background color: however it only affects out side rectangle part.
– TBA
Jan 20 at 12:12
|
show 7 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54270182%2fwavy-border-css-for-a-circle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
Based on a previous answer where I created something similar zig-zag-border-for-a-circle you can do some adjustement to have this layout. Basically, I added stroke to the SVG element then I added a radial gradient to cover the non needed part. By the way it's a solution without transparency.
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(#fff 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(16.36deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(32.73deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(49.09deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(65.45deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(81.81deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(98.18deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(114.54deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(130.90deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(147.27deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(164.2deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>");
background-size:100% 100%;
display:inline-block;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>If you want transparency you can modify the SVG element to only keep two triangle at the top and the bottom like this:
svg {
stroke: red;
stroke-width: 3px;
fill: transparent;
border: 1px solid;
}
svg polygon:first-child {
stroke-dasharray: 45, 35;
}
svg polygon:last-child {
stroke-dasharray: 45, 35;
stroke-dashoffset: -32;
}<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256'>
<polygon points='48,16 32,0 16,16' />
<polygon points='48,240 16,240 32,256' />
</svg>Then simply integrate it to the background:
.zigzag {
width:256px;
height:256px;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>Here is with a coloration inside:
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(orange 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>answered Jan 19 at 19:35
Temani AfifTemani Afif
71.1k93878
that is a nice way of doing it! Very informative.
– HypeWolf
Jan 19 at 19:36
Thank you so much :) Very helpful ..
– TBA
Jan 19 at 20:01
@TBA welcome, by the way you can still wait. We are a saturday and you will probably get more ideas ;) [I will also try to edit with a transparent solution]
– Temani Afif
Jan 19 at 20:02
1
@TBA I have updated with a transparent solution
– Temani Afif
Jan 19 at 21:40
@TemaniAfif One more doubt If I want to color only the background part of the waved circle is it possible. unfortunately I get the color in a Hex value. So I could set something like background color: however it only affects out side rectangle part.
– TBA
Jan 20 at 12:12
|
show 7 more comments
4
Based on a previous answer where I created something similar zig-zag-border-for-a-circle you can do some adjustement to have this layout. Basically, I added stroke to the SVG element then I added a radial gradient to cover the non needed part. By the way it's a solution without transparency.
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(#fff 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(16.36deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(32.73deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(49.09deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(65.45deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(81.81deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(98.18deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(114.54deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(130.90deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(147.27deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(164.2deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>");
background-size:100% 100%;
display:inline-block;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>If you want transparency you can modify the SVG element to only keep two triangle at the top and the bottom like this:
svg {
stroke: red;
stroke-width: 3px;
fill: transparent;
border: 1px solid;
}
svg polygon:first-child {
stroke-dasharray: 45, 35;
}
svg polygon:last-child {
stroke-dasharray: 45, 35;
stroke-dashoffset: -32;
}<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256'>
<polygon points='48,16 32,0 16,16' />
<polygon points='48,240 16,240 32,256' />
</svg>Then simply integrate it to the background:
.zigzag {
width:256px;
height:256px;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>Here is with a coloration inside:
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(orange 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>answered Jan 19 at 19:35
Temani AfifTemani Afif
71.1k93878
that is a nice way of doing it! Very informative.
– HypeWolf
Jan 19 at 19:36
Thank you so much :) Very helpful ..
– TBA
Jan 19 at 20:01
@TBA welcome, by the way you can still wait. We are a saturday and you will probably get more ideas ;) [I will also try to edit with a transparent solution]
– Temani Afif
Jan 19 at 20:02
1
@TBA I have updated with a transparent solution
– Temani Afif
Jan 19 at 21:40
@TemaniAfif One more doubt If I want to color only the background part of the waved circle is it possible. unfortunately I get the color in a Hex value. So I could set something like background color: however it only affects out side rectangle part.
– TBA
Jan 20 at 12:12
|
show 7 more comments
4
4
4
Based on a previous answer where I created something similar zig-zag-border-for-a-circle you can do some adjustement to have this layout. Basically, I added stroke to the SVG element then I added a radial gradient to cover the non needed part. By the way it's a solution without transparency.
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(#fff 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(16.36deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(32.73deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(49.09deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(65.45deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(81.81deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(98.18deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(114.54deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(130.90deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(147.27deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(164.2deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>");
background-size:100% 100%;
display:inline-block;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>If you want transparency you can modify the SVG element to only keep two triangle at the top and the bottom like this:
svg {
stroke: red;
stroke-width: 3px;
fill: transparent;
border: 1px solid;
}
svg polygon:first-child {
stroke-dasharray: 45, 35;
}
svg polygon:last-child {
stroke-dasharray: 45, 35;
stroke-dashoffset: -32;
}<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256'>
<polygon points='48,16 32,0 16,16' />
<polygon points='48,240 16,240 32,256' />
</svg>Then simply integrate it to the background:
.zigzag {
width:256px;
height:256px;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>Here is with a coloration inside:
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(orange 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>answered Jan 19 at 19:35
Temani AfifTemani Afif
71.1k93878
Based on a previous answer where I created something similar zig-zag-border-for-a-circle you can do some adjustement to have this layout. Basically, I added stroke to the SVG element then I added a radial gradient to cover the non needed part. By the way it's a solution without transparency.
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(#fff 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(16.36deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(32.73deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(49.09deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(65.45deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(81.81deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(98.18deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(114.54deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(130.90deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(147.27deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(164.2deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>");
background-size:100% 100%;
display:inline-block;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>If you want transparency you can modify the SVG element to only keep two triangle at the top and the bottom like this:
svg {
stroke: red;
stroke-width: 3px;
fill: transparent;
border: 1px solid;
}
svg polygon:first-child {
stroke-dasharray: 45, 35;
}
svg polygon:last-child {
stroke-dasharray: 45, 35;
stroke-dashoffset: -32;
}<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256'>
<polygon points='48,16 32,0 16,16' />
<polygon points='48,240 16,240 32,256' />
</svg>Then simply integrate it to the background:
.zigzag {
width:256px;
height:256px;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>Here is with a coloration inside:
.zigzag {
width:256px;
height:256px;
background:
radial-gradient(orange 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>.zigzag {
width:256px;
height:256px;
background:
radial-gradient(#fff 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(16.36deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(32.73deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(49.09deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(65.45deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(81.81deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(98.18deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(114.54deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(130.90deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(147.27deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(164.2deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>");
background-size:100% 100%;
display:inline-block;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>.zigzag {
width:256px;
height:256px;
background:
radial-gradient(#fff 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(16.36deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(32.73deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(49.09deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(65.45deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(81.81deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(98.18deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(114.54deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(130.90deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(147.27deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' fill='white' width='256' style='transform:rotate(164.2deg);'> <path d='M48 240 L48 16 L32 0 L16 16 L16 240 L32 256 Z' stroke='red' stroke-width='3' /></svg>");
background-size:100% 100%;
display:inline-block;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>svg {
stroke: red;
stroke-width: 3px;
fill: transparent;
border: 1px solid;
}
svg polygon:first-child {
stroke-dasharray: 45, 35;
}
svg polygon:last-child {
stroke-dasharray: 45, 35;
stroke-dashoffset: -32;
}<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256'>
<polygon points='48,16 32,0 16,16' />
<polygon points='48,240 16,240 32,256' />
</svg>svg {
stroke: red;
stroke-width: 3px;
fill: transparent;
border: 1px solid;
}
svg polygon:first-child {
stroke-dasharray: 45, 35;
}
svg polygon:last-child {
stroke-dasharray: 45, 35;
stroke-dashoffset: -32;
}<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256'>
<polygon points='48,16 32,0 16,16' />
<polygon points='48,240 16,240 32,256' />
</svg>.zigzag {
width:256px;
height:256px;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>.zigzag {
width:256px;
height:256px;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='transparent' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>.zigzag {
width:256px;
height:256px;
background:
radial-gradient(orange 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>.zigzag {
width:256px;
height:256px;
background:
radial-gradient(orange 60%,transparent 61%),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(16.36deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(32.73deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(49.09deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(65.45deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(81.81deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(98.18deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(114.54deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(130.90deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(147.27deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-97 -3 256 262' width='256' stroke-dasharray='45, 35' stroke='red' stroke-width='3' fill='orange' style='transform:rotate(164.2deg);'><polygon points='48,16 32,0 16,16' /><polygon points='48,240 16,240 32,256' stroke-dashoffset='-32' /></svg>");
background-size:100% 100%;
display:inline-block;
}
body {
background:pink;
}<div class="zigzag">
</div>
<div class="zigzag" style="width:100px;height:100px;">
</div>
<div class="zigzag" style="width:50px;height:50px;">
</div>answered Jan 19 at 19:35
Temani AfifTemani Afif
71.1k93878
edited Jan 20 at 12:22
answered Jan 19 at 19:35
Temani AfifTemani Afif
71.1k93878
answered Jan 19 at 19:35
Temani AfifTemani Afif
71.1k93878
answered Jan 19 at 19:35
Temani AfifTemani Afif
71.1k93878
71.1k93878
that is a nice way of doing it! Very informative.
– HypeWolf
Jan 19 at 19:36
Thank you so much :) Very helpful ..
– TBA
Jan 19 at 20:01
@TBA welcome, by the way you can still wait. We are a saturday and you will probably get more ideas ;) [I will also try to edit with a transparent solution]
– Temani Afif
Jan 19 at 20:02
1
@TBA I have updated with a transparent solution
– Temani Afif
Jan 19 at 21:40
@TemaniAfif One more doubt If I want to color only the background part of the waved circle is it possible. unfortunately I get the color in a Hex value. So I could set something like background color: however it only affects out side rectangle part.
– TBA
Jan 20 at 12:12
|
show 7 more comments
that is a nice way of doing it! Very informative.
– HypeWolf
Jan 19 at 19:36
Thank you so much :) Very helpful ..
– TBA
Jan 19 at 20:01
@TBA welcome, by the way you can still wait. We are a saturday and you will probably get more ideas ;) [I will also try to edit with a transparent solution]
– Temani Afif
Jan 19 at 20:02
1
@TBA I have updated with a transparent solution
– Temani Afif
Jan 19 at 21:40
@TemaniAfif One more doubt If I want to color only the background part of the waved circle is it possible. unfortunately I get the color in a Hex value. So I could set something like background color: however it only affects out side rectangle part.
– TBA
Jan 20 at 12:12
that is a nice way of doing it! Very informative.
– HypeWolf
Jan 19 at 19:36
that is a nice way of doing it! Very informative.
– HypeWolf
Jan 19 at 19:36
Thank you so much :) Very helpful ..
– TBA
Jan 19 at 20:01
Thank you so much :) Very helpful ..
– TBA
Jan 19 at 20:01
@TBA welcome, by the way you can still wait. We are a saturday and you will probably get more ideas ;) [I will also try to edit with a transparent solution]
– Temani Afif
Jan 19 at 20:02
@TBA welcome, by the way you can still wait. We are a saturday and you will probably get more ideas ;) [I will also try to edit with a transparent solution]
– Temani Afif
Jan 19 at 20:02
1
1
@TBA I have updated with a transparent solution
– Temani Afif
Jan 19 at 21:40
@TBA I have updated with a transparent solution
– Temani Afif
Jan 19 at 21:40
@TemaniAfif One more doubt If I want to color only the background part of the waved circle is it possible. unfortunately I get the color in a Hex value. So I could set something like background color: however it only affects out side rectangle part.
– TBA
Jan 20 at 12:12
@TemaniAfif One more doubt If I want to color only the background part of the waved circle is it possible. unfortunately I get the color in a Hex value. So I could set something like background color: however it only affects out side rectangle part.
– TBA
Jan 20 at 12:12
|
show 7 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54270182%2fwavy-border-css-for-a-circle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Nope. You can’t do that with CSS. You will have to use SVG to draw that kind of shape/path.
– Terry
Jan 19 at 18:41