CSS3 Как создаются зигзагообразные границы?

Question

Я видел много новых веб-сайтов, которые имеют зигзагообразную границу между изображением и div. Когда вы открываете изображение в новой вкладке, зигзага там нет, поэтому он был создан с использованием CSS3 или HTML5. Кто-нибудь знает, как это делается?

Вот некоторые примеры:

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

Подождите, пока они загрузятся.

Answer 1

Границы зигзага сделаны с использованием linear-gradient

• 50% это размытие
• 315 градусов - вращение правой стороны
• 45 градусов - вращение левой стороны
• Размер фона это ширина и расположение треугольника

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>

Вы также можете изменить угол поворота, изменив deg ценности

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>

Answer 2

Первый создается с повторяющимся фоновым изображением, а второй - с псевдоэлементом: before:

.ss-style-top::before {
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  height: 30px;
  background-size: 25px 100%;
  top: 0;
  background-image: linear-gradient(315deg, #FFF 50%, transparent 50%), 
  linear-gradient(45deg, #FFF 50%, transparent 50%);
  margin-top: -30px;
  z-index: 100;
}

Вот ссылка на фоновое изображение из первого примера: http://www.cssvillain.com/hungry/images/assets/parallax-bottom-alt.png