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%;
}

enter image description here

TBA
  • 1,077
  • 5
  • 41
  • 80
  • 1
    Nope. You can’t do that with CSS. You will have to use SVG to draw that kind of shape/path. – Terry Jan 19 '19 at 18:41

2 Answers2

5

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>

Wavy border CSS

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>

CSS wavy border with coloration

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • @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 '19 at 20:02
  • @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 '19 at 12:12
  • @TBA for this, simply take the first example, Change the `fill` that I set to white and change the white of the radial gradient – Temani Afif Jan 20 '19 at 12:14
  • @TemaniAfif it bit difficult with the logic for me. ```
    ``` I should be taking help of some custom css variables?     – TBA Jan 20 '19 at 12:22
  • @TBA I updated the answer with an example at the end – Temani Afif Jan 20 '19 at 12:23
  • Is it possible for me to add something like a custom css? var(--color) – TBA Jan 20 '19 at 12:25
  • @TBA using this configuration, you cannot. I will try to edit with another to easily adjust the color – Temani Afif Jan 20 '19 at 14:38
0

I know the OP asked for a CSS only solution, however I feel like for some people here, a <svg> would suffice. So in that case you can use a <svg> element with a <polyline> or just a simple <path> to control the stroke and fill like so:

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

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

</div>

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