मुझे आश्चर्य है कि अनियमित आकार, कुछ ऐसा, जैसे कि ग्रीनलैंड, यूरोप, अफ्रीका) के साथ div बनाने की कोई संभावना है। मैं CSS3 और HTML5 का उपयोग कर यहां मानचित्र बनाना चाहता हूं।मैं css3 और html5 के साथ अनियमित आकार के साथ div कैसे बना सकता हूं?
यहाँ एक उदाहरण छवि के लिए लिंक है:
तत्वों हमेशा आयताकार किया गया है। फिर भी, आप आयताकार विभाजन के भीतर सीएसएस आकार ड्राइंग करके और विभिन्न डिवीजनों (जेड-इंडेक्स, आदि के साथ) द्वारा अन्य आकारों का अनुकरण कर सकते हैं। यह तुम्हारी मदद करेगा:
क्या आप वहाँ एक ग्रिड है, जो या तो आप एक div पर कई ढ़ाल के साथ प्राप्त कर सकते हैं की तरह लग रहा है, या तो पर कई divs का एक ग्रिड के साथ जो आप सीएसएस ट्रांसफॉर्म लागू करते हैं (DEMO)।
HTML:
<div class='container'>
<div class='grid'>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<!-- and so on... -->
सीएसएस:
div { box-sizing: border-box; }
.container {
overflow: hidden;
width: 32em;
height: 32em;
margin: 5.6em auto 0;
background: silver;
}
.grid {
transform: skewX(-45deg)
rotate(15deg)
scaleX(1.785) scaleY(.8)
translateX(-4.5em) translateY(-3em);
}
.grid-row {
width: 32em;
height: 2em;
}
.grid-cell {
float: left;
width: 2em;
height: 2em;
}
.high {
background: gainsboro;
}
.high:hover {
background: whitesmoke;
}
अगर आप चाहते हैं सटीक अनियमित सीमाओं किए जाने के लिए, HTML छवि नक्शे के लिए (सीएसएस और निरपेक्ष स्थिति की तुलना में एक बेहतर समाधान अभी भी) जाना, कोशिश इस http://www.svennerberg.com/examples/imagemap_rollover/
आप चाहिए वर्गों के रूप में अपना नक्शा बनाने में सक्षम हो, जो भी तत्व आप चुनते हैं, और उसके बाद पूरी चीज़ को एक div/span/wrap में लपेटें और इसे प्राप्त करने के लिए css3 3d ट्रांसफॉर्म करें।
आपको बहुत धन्यवाद, वास्तव में, एना! यह मुझे बहुत जरूरी था! सादर! – Rafath
यह अभी तक की सबसे अच्छी चीजों में से एक हो सकता है। बहुत बढ़िया! – shane
यह बहुत अच्छा है! आपने कुछ असाधारण प्रदान किया है, एना! अगर मैं आपको 100 गुना बढ़ा सकता हूं, तो मैं चाहता हूं। – Grzegorz