सीएसएस ओवरलैपिंग तीर

Question

मैं कुछ भी पूरा करने की कोशिश कर रहा हूं, केवल नीचे दिए गए चित्र के समान ही CSS3 के साथ।

फर्क सिर्फ इतना है कि पिछले div एक नुकीली टिप होता है।

अनुकूलन के समान कुछ खोजने के लिए, मैं this js fiddle पर आया हूं जो कि मैं जो करना चाहता हूं उसके करीब आता है, लेकिन दो समस्याएं पेश करता है: पहला, यह कैनवास के साथ किया जाता है, और दूसरा, यह मुझे " प्रत्येक तीर के लिए तीर प्रभावी रूप से दो बार खींचें - एक div के लिए, और अगले तीर से पहले अंतरिक्ष के लिए। ऐसा करने का कुछ क्लीनर तरीका होना चाहिए - क्या कोई मुझे यहां कुछ दिशा प्रदान कर सकता है?

मुझे यह जानने की ज़रूरत है कि उपर्युक्त चित्र में क्या दिखाया गया है - ओवरलैपिंग div तीरों की एक श्रृंखला - केवल CSS3 के साथ।

Answer 1

इस प्रयास करें - http://jsfiddle.net/ksNr3/8/

ul { 
    margin: 20px 60px; 
} 

ul li { 
    display: inline-block; 
    height: 30px; 
    line-height: 30px; 
    width: 100px; 
    margin: 5px 1px 0 0; 
    text-indent: 35px; 
    position: relative; 
} 

ul li:before { 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    left: -2px; 
    border-style: solid; 
    border-width: 15px 0 15px 15px; 
    border-color: transparent transparent transparent #fff; 
    z-index: 0; 
} 

ul li:first-child:before { 
    border-color: transparent; 
} 

ul li a:after { 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: -15px; 
    border-style: solid; 
    border-width: 15px 0 15px 15px; 
    border-color: transparent transparent transparent #ccc; 
    z-index: 10; 
} 

ul li.active a { 
    background: orange; 
    z-index: 100; 
} 

ul li.active a:after { 
    border-left-color: orange; 
} 

ul li a { 
    display: block; 
    background: #ccc; 
} 

ul li a:hover { 
    background: pink; 
} 

ul li a:hover:after { 
    border-color: transparent transparent transparent pink; 
} 
​ 

UPDATED - यह क्लिक करने योग्य और कम से कम ओवरलैप होने वाले क्षेत्रों निर्मित - http://jsfiddle.net/ksNr3/8/

Answer 2

निम्नलिखित CSS3 के समाधान किसी भी चित्र उपयोग नहीं करता है और साथ काम करना आसान है ।

मैंने बनाया है पूरी तरह से उन उदाहरणों पर टिप्पणी की जिन्हें आगे बढ़ाया जा सकता है।

एक उदाहरण में ऐसे तीर हैं जो एक दूसरे के खिलाफ "दृष्टिहीन" हैं।

अन्य उदाहरण तीर पर "एंड-कैप्स" के साथ आपके प्रश्न में छवि की तरह है।

प्रत्येक उदाहरण के लिए एक सरल jQuery .click() घटना श्रोता है तो आप भले ही आप कहीं ब्रेडक्रम्ब में क्लिक कर रहे हैं देख सकते हैं, लंगर सही क्लिक करें घटना प्राप्त होगा। तीर पूंछ सही ढंग से काम करते हैं।

स्क्रीनशॉट NavBar के ब्रेडक्रम्ब के लिए सक्रिय CSS होवर पता चलता है:

जब सीएसएस ब्राउज़र में अक्षम होता है, ब्रेडक्रम्ब नेविगेशन शान से वापस पहुंच आवश्यकताओं के लिए हो जाता है।

संदर्भ:       jsFiddle