कोई छवि (x-browser)

Question

के लिए एक त्रिभुज कंटेनर कैसे बनाएगा, मैं एक आईएमजी युक्त डीआईवी कैसे बनाऊंगा जहां डीआईवी छवि को त्रिभुज में काटता है, जिससे त्रिभुज के बावजूद छवि का केवल एक हिस्सा प्रदर्शित होता है।

तो ..

<div> 
    <img src='some_image' /> 
</div> 

कहाँ छवि एक वर्ग है, लेकिन DIV चित्र वाली एक त्रिकोण है। http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/ इस समाधान को छोड़कर यह बहुत अच्छा हल करता है कि यह समाधान एक्स-ब्राउज़र अनुकूल नहीं है (यानी)।

http://css3pie.com/ दिलचस्प लग रहा है, हालांकि यह PHP पर निर्भर करता है।

Answer 1

आप गैर-आयताकार डीओएम तत्व नहीं बना सकते हैं।

इसे हैक करने के कुछ तरीके हैं।

सबसे पहले, तत्व के प्रत्येक तरफ त्रिकोणीय दिखने के लिए तत्व की प्रत्येक तरफ अलग-अलग चौड़ाई वाले सीएसएस सीमाओं का उपयोग करने की एक विधि है। यह अभी भी एक आयताकार होगा, लेकिन यह एक त्रिकोण की तरह दिखेगा। http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

इस दृष्टिकोण का नीचे की ओर है कि यह समकोण त्रिकोण बनाने तक ही सीमित है है:

इस यहाँ पर एक ट्यूटोरियल नहीं है। आप इसके चारों ओर जाने के लिए उनमें से कई में शामिल हो सकते हैं, लेकिन फिर आपके पास अपनी छवि के लिए एक कंटेनर नहीं है।

ऐसा करने का एक वैकल्पिक हैकी तरीका मुख्य तत्व के शीर्ष पर घूर्णन तत्वों को रखना होगा ताकि वे छवि के उचित हिस्सों को कवर कर सकें और इसे त्रिभुज बना सकें। यह सभी ब्राउज़रों में काम करता है, हालांकि आईई में घूर्णन करने के लिए कुछ बहुत ही बुरा वाक्यविन्यास होता है, और ब्राउज़र पर यह काफी भारी है, क्योंकि आप केवल आकार बनाने के लिए इसका उपयोग करेंगे।

सीएसएस ट्रांसफॉर्म का उपयोग करने का एक और विकल्प हो सकता है। हालांकि यह केवल अल्पसंख्यक ब्राउज़र के अल्पसंख्यक द्वारा समर्थित है, इसलिए यह अधिकांश उपयोगकर्ताओं के लिए काम नहीं करेगा।

जूता-सींग को <div> तत्व में बदलने की बजाय, इसके लिए उचित ग्राफिक्स लाइब्रेरी का उपयोग करने के लिए एक बेहतर तरीका हो सकता है।

मैं Raphael का उपयोग करने की सलाह दूंगा। यह एक जावास्क्रिप्ट लाइब्रेरी है जो एसवीजी (या आईई के लिए वीएमएल) का उपयोग कर ब्राउज़र में सीधे आकर्षित कर सकती है। इसका उपयोग करके त्रिकोण बनाने और उन्हें ग्राफिक के साथ भरना मुश्किल है। शुरू करने के लिए राफेल होम पेज पर उदाहरण देखें।

Answer 2

जहां तक ​​आप परिणाम चाहते हैं, इस पर निर्भर करते हुए, जहां तक ​​मुझे पता है कि आप Transform:; के बिना त्रिकोण डीआईवी नहीं बना सकते हैं, हालांकि एक समाधान में पीवीएन के आधे से पीएनजी काटने के साथ div में एक div होगा छवि केवल पारदर्शी भाग दिखा रहा है। सुनिश्चित नहीं है कि यह आपके लिए एक व्यवहार्य विकल्प है या नहीं।