Вы можете использовать gradleиенты css3 для создания фона с рисунком зигзагообразно, используйте псевдоним after css, чтобы применить его как границу.

HTML:

 
This is a header 

CSS:

 .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: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; background-repeat: repeat-x; background-size: 0px 100%, 9px 27px, 9px 27px; } 

Источник: CSS Zigzag Border с текстурированным фоном

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

Для будущих зрителей я нашел эту адаптацию ответа @ extramaster немного проще.

Это по сути то же самое, но он использует один меньше gradleиентов фона и позволяет .navbar объекту ( .navbar в моей разметке) отображать вместо жесткого кодирования второй цвет в zig-zag.

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

HTML:

 
This is a header
  

CSS:

 .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 */ } направо .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 */ } 

Вы можете создать отдельный треугольник с помощью CSS довольно легко (просто настроить свойства границы). Для того, чтобы это сработало, вам нужно будет создать очень немного разметки самостоятельно. Я бы рекомендовал против такого подхода.

Вместо этого вам, скорее всего, лучше использовать индивидуальное изображение, содержащее один треугольник (желательно прозрачный .png), а затем использовать свойства background-image и background-repeat ( repeat-x ) для привязки к div (ваша «граница»).

К сожалению, пока нет прямого пути достижения этого, используя чистый CSS.

В CSS3 есть свойство border-image. Может быть, вы можете работать так, как хотите. Подробнее здесь http://www.w3schools.com/cssref/css3_pr_border-image.asp