Làm biên giới tam giác lởm chởm trong CSS

Question

Tôi có một hình dạng với một cạnh như thế này trong Photoshop:

Có thể làm cho tam giác lặp đi lặp lại như một biên giới với CSS?

Answer 1

Bạn có thể sử dụng độ dốc css3 để tạo nền có hoa văn zig-zag, sử dụng pseudo after css để áp dụng nó như một đường viền.

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

Nguồn: CSS Zigzag Border with a Textured Background

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

Answer 2

Bạn có thể tạo individual triangle sử dụng CSS khá dễ dàng (chỉ cần chỉnh sửa thuộc tính đường viền). Để làm việc này, bạn sẽ cần phải tự tạo ra khá nhiều đánh dấu. Tôi sẽ khuyên bạn nên chống lại cách tiếp cận này. Thay vào đó, bạn có thể sử dụng hình ảnh riêng lẻ có chứa một hình tam giác đơn lẻ (tốt nhất là trong suốt .png) và sau đó sử dụng các thuộc tính background-image và background-repeat (repeat-x) để liên kết với div ("biên giới") của bạn.

Thật không may là chưa có cách nào thuận lợi để đạt được điều này bằng CSS thuần túy.

Answer 3

Có thuộc tính hình ảnh đường viền trong CSS3. Có thể bạn có thể làm việc theo cách bạn muốn. Thêm tại đây http://www.w3schools.com/cssref/css3_pr_border-image.asp

Answer 4

Đối với khán giả trong tương lai, tôi thấy sự thích nghi này @extramaster's answer để được một chút đơn giản hơn.

Về cơ bản nó giống nhau, nhưng nó sử dụng một ít độ dốc nền và cho phép đối tượng sao lưu (.navbar trong đánh dấu của tôi) hiển thị thay vì mã hóa cứng màu thứ hai vào zig-zag.

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