सीएसएस

Question

के साथ तीर रेखा उत्पन्न करें मैं एक तीर प्रदर्शित करने के लिए बीच में एक ब्रेकडाउन के साथ एक सीधी क्षैतिज रेखा उत्पन्न करने की कोशिश कर रहा हूं। विचार यह है कि लाइन के नीचे प्रदर्शित सामग्री लाइन के ऊपर प्रदर्शित सामग्री के बारे में विवरण प्रदान करेगी। यहां बताया गया है लाइन की तरह दिखना चाहिए है:

मैं शुद्ध HTML और सीएसएस (कोई बिटमैप छवियों) के साथ इस उत्पन्न करने के लिए कोशिश कर रहा हूँ। Font Awesome का उपयोग स्वीकार्य है यदि यह सही परिणाम उत्पन्न करने के समाप्त होता है। मुझे लाइन की मोटाई और रंग पर नियंत्रण की आवश्यकता है। ब्रेकडाउन का कोण कोई फर्क नहीं पड़ता (ऊपर दिखाए गए नमूने पर 45 और 9 0 डिग्री)। मुझे इस CSS triangle trick से अवगत है, लेकिन मैं इस परिदृश्य में इसे लागू करने के तरीके के बारे में नहीं सोच सकता।

Answer 1

यह अच्छा प्रभाव सीएसएस :before और :after गुणों का उपयोग करके हासिल किया जा सकता है। cssarrowplease पर साइमन होजबर्ग के ऑनलाइन जनरेटर के साथ खेलना सबसे अच्छा है।

Answer 2

एक पारदर्शी तीर पृष्ठभूमि के साथ एक समाधान है, तो आप हर पृष्ठभूमि के साथ इसका इस्तेमाल करने की इजाजत दी:

HTML:

<div class="line-separator"> 
    <div class="side-line"> </div> 
    <div class="triangle"> </div> 
    <div class="side-line"> </div> 
</div> 

सीएसएस:

.side-line { 
    display: inline-block; 
    border-top: 1px solid black; 
    width: 20%; 
} 

.triangle { 
    display: inline-block; 
    height: 7px; 
    width: 7px; 
    transform: rotate(45deg); 
    transform-origin: center center; 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    margin-left: -3px; 
    margin-right: -3px; 
    margin-bottom: -3px; 
} 

लाइव डेमो : http://jsfiddle.net/85saaphw/