एक सीएसएस त्रिकोण पर एक छवि पृष्ठभूमि डालना

Question

मैं एक div पर पृष्ठभूमि छवि डालने की कोशिश कर रहा हूं जो त्रिभुज बनाने के लिए सीएसएस सीमाओं का उपयोग कर रहा है। यह अब तक मेरे वर्तमान प्रयास है। यह ठोस रंगों के साथ ठीक काम करता है, लेकिन जब छवियों की बात आती है तो मुझे नुकसान होता है।

एचटीएमएल

<div class="wrapper"> 
    <div class="left triangle"></div> 
    <div class="right triangle"></div> 
</div> 

सीएसएस

.wrapper { 
    padding:50px 0px; 
    height: 50px; 
    position: relative; 
    width: 300px; 
    background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg"); 
} 

.triangle { 
    border-bottom: 50px solid #eee; 
    width: 50px; 
    position: absolute; 
    bottom: 0; 
} 

.right { 
    right: 0; 
    border-left: 100px solid transparent; 
} 

.left { 
    left: 0; 
    border-right: 100px solid transparent; 
} 

jsfiddle: http://jsfiddle.net/aRS5g/9/

हां, तो फिडल जेएस कि को देखते हुए, मैं कैसे होगा कि ग्रे अनुभाग भी मेरी पसंद की एक छवि पृष्ठभूमि, # 111, #eee, आदि जैसे रंगों का उपयोग करने के बजाय ..

Answer 1

सीएसएस में एक त्रिकोण एक हैक है, जो किसी तत्व की सीमा के हिस्सों को प्रदर्शित करके बनाया गया है। इसलिए, जो त्रिकोण आप देखते हैं वह तत्व नहीं है, लेकिन एक सीएसएस सीमा है।

सीमा को सामान्य सीएसएस शैली का उपयोग करके स्टाइल नहीं किया जा सकता है, और यह वह जगह है जहां आप सीएसएस त्रिकोणों की सीमाओं को देखना शुरू करते हैं, और यह वास्तव में एक अच्छी तकनीक के बजाय हैक क्यों है।

एक सीएसएस समाधान है जो आपके लिए काम कर सकता है: border-image।

border-image एक सीएसएस शैली है जो आप अपेक्षा करते हैं; यह एक छवि को एक तत्व की सीमा में रखता है। चूंकि सीएसएस त्रिकोण एक सीमा है, इसलिए आप पृष्ठभूमि छवि को अपने त्रिकोण पर रखने के लिए इसका उपयोग कर सकते हैं।

हालांकि, चीजें जटिल हो जाती हैं। border-image शैली शैली सीमाओं के लिए डिज़ाइन की गई है, त्रिकोण नहीं; इसमें स्टाइलिंग कोनों और किनारों के लिए सुविधाएं हैं, और छवियों को उचित रूप से खींचती है। मैंने इसे त्रिकोण के साथ नहीं देखा है, लेकिन मैं भविष्यवाणी कर सकता हूं कि इसमें कुछ क्विर्क हो सकते हैं जो इसे उपयोग करने में मुश्किल बनाते हैं। लेकिन इसे जाने के लिए स्वतंत्र महसूस करें।

border-image के साथ अन्य समस्या ब्राउज़र समर्थन है। यह अपेक्षाकृत नई सीएसएस शैली है, और आईई के सभी संस्करणों सहित कई मौजूदा ब्राउज़रों में पूरी तरह से असमर्थित है। आप CanIUse पर इसके लिए पूर्ण ब्राउज़र समर्थन तालिका देख सकते हैं।

इन सभी मुद्दों के कारण, मैं सुझाव दूंगा कि यदि आप ब्राउज़र में आकार आकर्षित करना चाहते हैं, तो आपको वास्तव में सीएसएस हैक छोड़ने और एसवीजी या कैनवास का उपयोग करने पर विचार करना चाहिए। ये अधिकांश ब्राउज़रों में अच्छी तरह से समर्थित हैं, और स्पष्ट रूप से उन सभी ड्राइंग सुविधाओं का समर्थन करते हैं जिन्हें आप संभवतः चाहते हैं।

सीएसएस त्रिकोण कभी-कभी तीर आकार बनाने के लिए बहुत अच्छे होते हैं, लेकिन इससे कहीं अधिक जटिल के लिए आपके सीएसएस कोड में अधिक से अधिक हैक्स को ढेर करने की बजाय उचित ग्राफिक्स का उपयोग करना बहुत आसान होता है।

Answer 2

देने के लिए एक div एक पृष्ठभूमि छवि आप सीएसएस नियम

background-image:url("your image url here"); 

तो अपने वर्ग .triangle की तरह इस

.triangle { 
background-image:url("your url here"); 
background-repeat:no-repeat; 
border-bottom: 50px solid #eee; 
width: 50px; 
position: absolute; 
bottom: 0; 
} 

भी अपनी पृष्ठभूमि छवि के आधार पर आप पृष्ठभूमि दोहराने स्थापित करना चाहिए लगेगा जोड़ना होगा। दोहराना-x छवि को बाएं और दाएं (x-axis) को दोहराता है जबकि दोहराना-y आपकी छवि को ऊपर और नीचे (y-axis) दोहराता है। यदि आप छवि को दोहराना नहीं चाहते हैं तो बस दोहराने का उपयोग करें, लेकिन मैं निश्चित ऊंचाई और चौड़ाई का उपयोग करने की अनुशंसा करता हूं।