Create Clip-Path Wave CSS Edges

Create clip-path wave css edges

you should generate this clip-path by a wave function and its frequency.

I have used cos() in PHP. You can find the link as in the following:

https://repl.it/@ebimammadi/generate-clip-path-wave

your clip-path may seem something like this:

 clip-path: polygon(100% 0%, 0% 0% , 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);

you can change the parameters in order to have your customized wave!

Wavy shape with css

I'm not sure it's your shape but it's close - you can play with the values:

https://jsfiddle.net/7fjSc/9/

#wave {  position: relative;  height: 70px;  width: 600px;  background: #e0efe3;}#wave:before {  content: "";  display: block;  position: absolute;  border-radius: 100% 50%;  width: 340px;  height: 80px;  background-color: white;  right: -5px;  top: 40px;}#wave:after {  content: "";  display: block;  position: absolute;  border-radius: 100% 50%;  width: 300px;  height: 70px;  background-color: #e0efe3;  left: 0;  top: 27px;}

<div id="wave"></div>

wavy divs border with css or any lib

You need a svg path to clip the first image with clip-path css/svg property.

SVG/CSS solution:

img{
  float:left;
  clear:both;
  width:260px;
  height:260px;
}

.clipped{
  z-index:10;
  position:relative;
  margin-bottom:-20px;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

<img class="clipped" src="http://www.freeimageslive.com/galleries/space/moon/pics/a11_h_40_5878.gif" alt="Sample Image" />
<img src="http://www.freeimageslive.com/galleries/space/moon/pics/a12_h_55_8221.gif" alt="Sample Image" />

<svg>
  <defs>
    <clipPath id="clip">
      <path d="M0,0 0,250 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0
               v-250 z"/>
    </clipPath>
  </defs>
</svg>

How to add border in my clip-path: polygon(); CSS style

Can border be applied to a clipped element along the clip path?

No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. You can see this in the below snippet:

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 3px solid;
  background: darkseagreen;
}
div + div {
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
  clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
}

<div></div>
<div></div>

How to blend the div in css?

You could use a clip-path.

There are two ways to do it:

Create an SVG that has a path of the shape you want and use that as the clip-path: https://codesandbox.io/s/bezier-curve-clip-path-h8x8l?from-embed=&file=/index.html
Generate a polygon yourself with code which approximates the curve you want. Have a look at this question here: Create clip-path wave css edges

Create Clip-Path Wave CSS Edges