Making poszarpaną trójkącie granicznym w CSS

Question

mam kształt z krawędzią jak ten w Photoshopie:

Czy to możliwe, aby powtarzające się trójkąty jako granicy z CSS?

Answer 1

można wykorzystywać do tworzenia gradientów CSS3 zygzakowata wzorzyste tle, należy użyć pseudo after css, aby zastosować go jak granicy.

HTML:

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

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; 
    } 

Źródło: CSS Zigzag Border with a Textured Background

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

Answer 2

Możesz łatwo stworzyć kod individual triangle przy użyciu CSS (wystarczy zmienić właściwości obramowania). Aby to zadziałało, będziesz musiał sam wygenerować znaczną ilość znaczników. Polecam wbrew temu podejściu.

Zamiast jesteś prawdopodobnie lepiej wyłączyć za pomocą pojedynczy obraz zawierający pojedynczy trójkąt (najlepiej przezroczysty png), a następnie użyć background-image i background-repeat (repeat-x) właściwości, które wiążą się div (Twój „granicznej”).

Niestety, nie ma jeszcze prostego sposobu osiągnięcia tego przy użyciu czystego CSS.

Answer 3

Istnieje właściwość obramowania obrazu w CSS3. Może uda ci się to rozwiązać w pożądany sposób. Więcej tutaj http://www.w3schools.com/cssref/css3_pr_border-image.asp

Answer 4

Dla przyszłych widzów, znalazłem to adaptacja @extramaster's answer być trochę prostsze.

Zasadniczo to samo, ale używa o jeden mniej gradientów tła i pozwala, aby obiekt podkładu (.navbar w moim znaczniku) pokazywał się zamiast twardego kodowania drugiego koloru do zygzaka.

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

HTML:

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

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 */ 
}