Zig Zag or Serrated border with transparent background

Question

I am looking at trying to make my navigation menu here: http://jillianssf.com/dev/ to appear with a transparent serrated border.

I have found some stuff online but I have no idea how to implement it into my website.

Specifically I found something about SASS mixing loacted at the bottom of this page: https://localmotors.com/blog/post/zig-zag-borders-in-css/1205/

I also found this in codepen: http://codepen.io/gilbarbara/pen/pvwmEb

The problem is that there is no description on how to add this to a site.

I have done the top button using an image border but it doesn't look very clean. I'd like to do this purely by CSS if as all possible. Any suggestions would be great!

Answer 1

In the article you linked , they do show code how to implement the border and also provide a fiddle .

Here is the code from that article:

  .container { position: relative; padding: 8px 8px 32px 8px; background: #dddccf; } .container:after { background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0); background-position: left-bottom; background-repeat: repeat-x; background-size: 32px 32px; content: " "; display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 32px; } 

 <div class="container"> <h1>Content Here</h1> </div> 

Answer 2

Try this fiddle .

I used pseudo-elements and CSS gradients to emulate the zig-zag/serrated border.

HTML

<div>
    Content Here
</div>

CSS

body {
    width: 100%;
    height: 100%;
    background-image: url(http://jillianssf.com/dev/wp-content/uploads/2014/05/slider-1.jpg);
}
div {
    height: 200px;
    padding: 20px;
    margin: 20px;
    position: relative;
    background: rgba(0,0,0,0.7);
    color: #fd0;
}
div:after {
    content: '';
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 100%;
    left: 0px;
    background:
        linear-gradient(-50deg, rgba(0,0,0,0.7) 4px, transparent 0px),
        linear-gradient(50deg, rgba(0,0,0,0.7) 4px, transparent 0px);
    background-size: 10px 10px;
    background-repeat: repeat-x;
}