Making jagged triangle border in CSS

Question

I have a shape with an edge like this in Photoshop:

Is it possible to make the repeated triangles as a border with CSS?

Answer 1

You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border.

.header{
    color: white;
    background-color: #2B3A48;
    text-align: center;
}
.header::after {
    content: " ";
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}

<div class="header"><h1>This is a header</h1></div>

Source: CSS Zigzag Border with a Textured Background

JSFiddle: http://jsfiddle.net/kA4zK/

Answer 2

For future viewers, I found this adaptation of @extramaster's answer to be a little simpler.

It's essentially the same, but it uses one fewer background gradients and allows the backing object (.navbar in my markup) to show through instead of hard-coding the second color into the zig-zag.

JsFiddle: http://jsfiddle.net/861gjx0b/2/

.header {
  position: relative;
  color: white;
  background-color: #2B3A48;
  text-align: center;
}

.navbar {
  background: #272220;
  height: 20px;
}

.header:after {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  bottom: -10px;
  /* -height */
  left: 0;
  right: 0;
  /* TODO Add browser prefixes */
  background: linear-gradient( 45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%);
  background-size: 8px 20px;
  /* toothSize doubleHeight */
  background-position: 0 -10px;
  /* horizontalOffset -height */
}

<div class="header">
  <h1>This is a header</h1>
</div>
<nav class="navbar"></nav>