Using CSS Clip with percentage

Question

I\'m trying to display only the top half of an image and the bottom half of the same image in 2 separate divs.

I\'ve tried with the CSS property clip, but i

Answer 1

Sorry that I don't have enough reputation to write a comment.

There's absolutely a solution without JS.

All you need to do is

1. Create an svg clipPath, which allows you define whatever path you want.
2. Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentage path definition

3. Apply the clipPath in your css code.

   #your-element {
      clip-path: url(#clipPathId);
   }
   

If you want more information, please refer this answer https://stackoverflow.com/a/28312070/5692151