0

I’ve been strugglin on making a wavy line on the transition between two sections on my page. These two sections have their respective background images. What I’ve found are examples where at least one section have a simple colored background.

The problem is that when using some of the methods found (svg, clip-path, transform), I have to always fill with a color.

What I want: https://i.stack.imgur.com/bjDvO.jpg

What I have done so far: https://i.stack.imgur.com/uAhgR.jpg (This one is a sloped line example. I have to do various shapes on different borders, but its an example to show the separation that would be noticed with the wavy border too)

victim
  • 65
  • 1
  • 6

1 Answers1

2

This is my solution: I'm using clip-path as you intended, although, as you may know, clip-path is not supported in all browsers.

The main idea is having clipPathUnits="objectBoundingBox".

MDN quote:

This value [clipPathUnits="objectBoundingBox"] indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

*{margin:0;padding:0;}
#top {
  padding: 0;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/castell.jpg);
  background-size: cover;
  height: 50vh;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}

body{background:url(https://images.unsplash.com/photo-1470327500070-4857199b1bcd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);background-size:cover}
<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0 L0,.5 Q.3,.2 .5,.5  T1,.5L1,0 0,0" />
        </clipPath>
    </defs>
</svg>
 
<div id="top"></div>
enxaneta
  • 31,608
  • 5
  • 29
  • 42