CSS3 How are zigzagged borders made?

I have been seeing a lot of new websites that have a zigzagged border in between an image and a div. When you open the image in a new tab the zigzag is not there, so it was created either with CSS3 or HTML5. Does anyone know how it is done?

Here are some examples:

• http://themeforest.net/item/hungry-a-onepage-html-restaurant-template/full_screen_preview/9855248ref=freshdesignweb
• http://designwp.com/yummie/brown/index.html

Wait for them to load.

zig zag borders are made using linear-gradient

• 50% is the blur
• 315deg is the rotation of right side
• 45deg is the rotation of left side
• background size is the width and placement of the triangle

div {
  width: 100%;
  height: 50px;
  background-size: 25px 120%;
  background-image: linear-gradient(315deg, red 50%, rgba(0, 0, 0, 0) 50%), 
                    linear-gradient(45deg, red 50%, black 50%);
}

<div></div>

you can also change the angle of rotation by changing the deg values

div {
  width: 100%;
  height: 50px;
  background-size: 25px 150%;
  background-image: linear-gradient(297deg, red 50%, rgba(0, 0, 0, 0) 50%), 
                    linear-gradient(63deg, red 50%, black 50%);
}

<div></div>