मैं एक सीएसएस त्रिकोण कैसे बना सकता हूं (उदाहरण के लिए) जो केवल त्रिकोण की सीमाओं के अंदर होवर ईवेंट ट्रिगर करेगा?कस्टम आकार के लिए होवर। कैसे?
प्रैक्टिस में, यह गेम और उस पर अलग-अलग ऑब्जेक्ट्स पर स्थान होगा, अगर हम इसे घुमाएंगे तो धुंधला होना चाहिए।
इस demo में नोटिस कि span:hover तत्व तत्व आयताकार सीमाओं को दर्ज करते समय ट्रिगर ट्रिगर नहीं करते हैं, त्रिकोण नहीं।
आप SVG polygon के साथ आकार बनाने की कोशिश कर सकते हैं, और :hover अपने "सत्य" क्षेत्र का सम्मान करेंगे।
नोट यह कस्टम आकार के लिए केवल एक शुद्ध सीएसएस + एसवीजी समाधान है। और कस्टम आकार यह शुद्ध सीएसएस के साथ बनाया नहीं है, लेकिन एसवीजी ...
एचटीएमएल
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="60,0 0,120 120,120" id="shape"/>
</svg>
बहुत ही सरल सीएसएस थोड़ा सा!
#shape:hover{fill:red;}
यहां एक working fiddle है।
ब्राउज़र समर्थन: This question ब्राउज़र समर्थन करने के लिए कुछ प्रकाश भेजें। कोई स्वीकार्य उत्तर नहीं है, लेकिन जहां तक मैं देख सकता हूं कि ब्राउज़र के लिए बहुत उपयोगी लिंक और विकल्प हैं जो एसवीजी का समर्थन नहीं करते हैं।
क्या आप div में त्रिकोण बनाने के लिए चाहते हैं? – PraJen
मुझे नहीं लगता कि आप इसे तत्वों के साथ कर सकते हैं और शायद 'कैनवास' का उपयोग करना होगा। –
कुछ टैग हैं जो काम कर सकते हैं, 'मानचित्र' और 'क्षेत्र'। http://www.w3schools.com/tags/tag_area.asp आप एक त्रिकोण भी खींच सकते हैं। –