Grow your CSS skills. Land your dream job.

Creating a zigzag line for a border

  • # May 4, 2013 at 10:41 am

    I’m helping a friend with her website and she sews for people. I thought giving her some border lines that are zigzagged would resemble those fun fabric sample cuts you see. I’ve seen these lines, I just have no idea how to create them.

    Here’s an example I came across: http://weblogbetter.com/

    # May 4, 2013 at 10:57 am

    That’s actually a background image and it’s not done with code. you can get a nice stitching effect with dashed border. But if you want that zigzag effect you will have to use a background-image. use this.

    Border:dashed 1px #000000;

    # May 4, 2013 at 1:26 pm

    Here is something you can do with CSS and also something you probably haven’t seen anywhere before:

    http://codepen.io/Merri/pen/tnFkz

    It isn’t zigzag but maybe fits the sewing theme?

    # May 4, 2013 at 1:29 pm

    Hi, I’ve found this: http://codepen.io/joeyhoer/pen/EraAu

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".