Grow your CSS skills. Land your dream job.

Liquid container div with zig-zag border

  • # December 6, 2012 at 12:15 pm

    Hello! I’m trying to achieve [this](http://i5.photobucket.com/albums/y159/devisi0n/Screenshot2012-12-06at115110AM.png “this”) a liquid container div with a zig-zag border on the top and bottom with a drop shadow!

    I’m familiar with creating an [arrow div](http://css-tricks.com/triangle-with-shadow/ “arrow div”) with a shadow and a [zig-zag background](http://lea.verou.me/css3patterns/#zig-zag “zig-zag background”), unfortunately the former method can’t be repeatable and the latter method can’t have a drop shadow applied to it and with both methods it can’t be guaranteed that the edge’s of the first and last triangle align flush with the containing box.

    How best should I approach this?

    Thanks!

    # December 6, 2012 at 1:00 pm

    Pretty sure that whatever method you use a drop-shadow is going to be difficult…at least until the drop-shadow filter is fully supported.

    Best as I can figure right now is a background image but that’s not going to help with the alignment of the triangle thing you want.

    # December 7, 2012 at 12:34 am

    Thanks, I think I’m going to have to settle for a background image on a div.

    # December 8, 2012 at 7:55 pm

    Following up, is it possible to only apply a drop shadow to the left and right sides of a div container?

    # December 9, 2012 at 5:40 am

    If you mean a box-shadow then yes but you have to use two….one to the left and one to the right.

    http://codepen.io/joe/pen/syerD

    # December 9, 2012 at 5:11 pm

    You are going to get a little bleed on the top and bottom though

    # December 11, 2012 at 12:16 pm

    Yeah, unfortunately I see that.

    I just created an image for the zig-zags on the top and bottom and for the middle a 1-pixel tall background image that spans the width of the div container:

    #container {
    min-height:461px;
    background-image: url(“../images/wrapper-shadow.png”);
    background-repeat: repeat-y;
    }

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

You must be logged in to reply to this topic.

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