machen gezacktes Dreieck Grenze in CSS

Question

Ich habe eine Form mit einer Kante, wie dies in Photoshop:

Ist es möglich, die wiederholten Dreiecken als Grenze mit CSS zu machen?

Answer 1

Sie können CSS3-Verläufe verwenden, um einen Zick-Zack-gemusterten Hintergrund zu erstellen, verwenden Sie die after css-Pseudo, um es wie eine Grenze anzuwenden.

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

Quelle: CSS Zigzag Border with a Textured Background

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

Answer 2

Sie können eine individual triangle mithilfe von CSS relativ einfach erstellen (ändern Sie die Rahmeneigenschaften). Damit dies funktioniert, müssen Sie selbst einiges an Markup generieren. Ich würde diesen Ansatz empfehlen.

Stattdessen sind Sie wahrscheinlich besser dran, ein einzelnes Bild mit einem einzigen Dreieck (vorzugsweise ein transparentes .png) enthält, und dann verwendet background-image und background-repeat (repeat-x) Eigenschaften, die zu einem div zu binden (Ihre „Grenze“).

Leider gibt es noch keine direkte Methode, um dies mit reinem CSS zu erreichen.

Answer 3

In CSS3 gibt es eine border-image -Eigenschaft. Vielleicht können Sie es so ausarbeiten, wie Sie es möchten. Mehr hier http://www.w3schools.com/cssref/css3_pr_border-image.asp

Answer 4

Für zukünftige Zuschauer, ich diese Anpassung von @extramaster's answer fand ein wenig zu sein, einfacher.

Es ist im Wesentlichen das gleiche, aber es verwendet eine weniger Hintergrund Farbverläufe und ermöglicht das Hintergrundobjekt (.navbar in meinem Markup) durch durchscheinen, anstatt die zweite Farbe in den Zick-Zack fest zu codieren.

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