सीएसएस

Question

में दांतेदार त्रिकोण सीमा बनाना मैं Photoshop में इस तरह की एक बढ़त के साथ एक आकार है:

यह सीएसएस के साथ एक सीमा के रूप में दोहराया त्रिकोण बनाने के लिए संभव है?

Answer 1

आप ज़िग-ज़ैग पैटर्न वाली पृष्ठभूमि बनाने के लिए css3 ग्रेडियेंट का उपयोग कर सकते हैं, after सीएसएस छद्म सीमा का उपयोग इसे सीमा के रूप में लागू करने के लिए करें।

HTML:

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

सीएसएस:

.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

आप सीएसएस का उपयोग करके आसानी से individual triangle बना सकते हैं (केवल सीमा गुणों को ट्विक करें)। इस काम के लिए आपको खुद को मार्कअप का थोड़ा सा उत्पन्न करने की आवश्यकता होगी। मैं इस दृष्टिकोण के खिलाफ सिफारिश करेंगे।

इसके बजाय आप की संभावना एक व्यक्ति एक भी त्रिकोण (अधिमानतः एक पारदर्शी .png) और फिर उस बाध्य करने के लिए एक div (अपने "सीमा") करने के लिए उपयोग background-image और background-repeat (repeat-x) गुण वाली छवि का उपयोग कर बेहतर कर रहे हैं।

दुर्भाग्य से शुद्ध सीएसएस का उपयोग करके इसे प्राप्त करने के लिए अभी तक कोई सीधा-आगे तरीका नहीं है।

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/

एचटीएमएल:

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

सीएसएस:

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