- This topic is empty.
-
AuthorPosts
-
July 1, 2016 at 10:27 am #243306
Dest
ParticipantI 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
July 1, 2016 at 4:49 pm #243322Atelierbram
ParticipantTo achieve this effect maybe look into clipping and masking
Here a demo with a SVG polygon:
July 2, 2016 at 5:45 am #243325Atelierbram
ParticipantLayouts 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.
July 2, 2016 at 12:24 pm #243331Dest
ParticipantHow can i apply this clip mask to a slider ?
July 2, 2016 at 1:11 pm #243332Atelierbram
ParticipantCan you show this slider? What have you tried; what do you have so far?
July 3, 2016 at 12:38 am #243333Dest
ParticipantI 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” xmlns:xlink=”http://www.w3.org/1999/xlink” 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.pngJuly 3, 2016 at 2:12 am #243334Atelierbram
ParticipantNot 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.
July 3, 2016 at 11:11 am #243343 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.