使鋸齒狀三角形邊界在CSS

Question

我有一個形狀在Photoshop這樣一個優勢：

是否有可能使重複的三角形與CSS邊界？

Answer 1

您可以使用css3漸變創建Z形圖案背景，使用css僞將其應用爲邊框。

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

來源：CSS Zigzag Border with a Textured Background

的jsfiddle：http://jsfiddle.net/kA4zK/

Answer 2

可以使用CSS很容易地創建一個individual triangle（只是調整邊框屬性）。爲了使這個工作，你需要自己生成相當多的標記。我會建議不要這種方法。

相反，你可能會關閉使用含有一個三角形（最好是透明的PNG），然後使用background-image和background-repeat（repeat-x）屬性以結合到該一個div（您的「邊界」）單獨的圖像更好。

不幸的是沒有還沒有實現這一使用純CSS一個直接的方式。

Answer 3

CSS3中有一個邊框圖像屬性。 也許你可以用你想要的方式解決問題。更多此處http://www.w3schools.com/cssref/css3_pr_border-image.asp

Answer 4

對於未來的觀衆，我發現@extramaster's answer這種適應是一個小簡單。

它本質上是一樣的，但它使用了一個較少的背景漸變，並允許支持對象（我的標記中的.navbar）顯示，而不是將第二種顏色硬編碼爲之字形。

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