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% является размытость
• 315deg является rotatio п справа
• 45deg является вращение слева
• фона размер ширина и размещение треугольника

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

Сначала один построен с повторяемостью фонового изображения, и secound один с: перед тем псевдо элемента:

.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