Help with a zig-zag border

[Dest]

I need help with a zig-zag border , this is a picture with an example:

http://image.prntscr.com/image/799653743b494f92bf823ebe01f39ff1.png

I have searched all over the internet for a method like in the picture above but with no luck.

I just need the name of the method or a link to a tutorial, i found a css tutorial for a normal zig-zag code but that code is very different than this ,

this is the link to the tutorial i found :

cocreate.localmotors.com/blo…s-in-css/1205/

(copy the link , for some reason it won’t let me post the full url so i removed the http)

as you can see the borders are very close to each other , i want something similar to the picture above

Sorry for my bad english

[Atelierbram]

To achieve this effect maybe look into clipping and masking

Here a demo with a SVG polygon:

http://codepen.io/atelierbram/pen/YWVROq?editors=1100

[Atelierbram]

Layouts on the web that wants to “break out of the box” and/or are more like print magazine layouts are interesting to me. Demo here comes closer to your screenshot, at larger screens sizes that is.

http://codepen.io/atelierbram/pen/OXmGrQ?editors=1100

[Dest]

How can i apply this clip mask to a slider ?

[Atelierbram]

Can you show this slider? What have you tried; what do you have so far?

[Dest]

I tried adding your code , but your code is based on 1 image , if i add the code to the slider the image will overlay. I have succeded with other shapes but with this polygon shape nope.

This is one of the shapes i have added:
<svg id=”bigHalfCircle” xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; version=”1.1″ width=”100%” height=”80″ viewBox=”0 0 100 100″ preserveAspectRatio=”none”>
<path d=”M0 100 C40 0 60 0 100 100 Z” />
</svg>

All of the shapes from this pen https://codepen.io/lukeyphills/pen/FjygE i added successfully

This is the slider:
http://image.prntscr.com/image/d10e24a03c8641129ff2b5cc131486f6.png

[Atelierbram]

Not every slider will allow for HTML-markup with SVG’s like the one in my demo. I did a quick search and I found this slider from CodyHouse which does have similar markup with SVG’s (like the one in my demo).

I would suggest taking that one and try to combine it with the SVG-shape that you want and see if you can make it work for you. Maybe you can make a demo and show us the progress so we will be better informed, and therefor will be able to provide better help.

[Atelierbram]

http://codepen.io/atelierbram/pen/WxOQjO/

[Author]

Posts