दिलचस्प पोस्ट
सेट कस्टम फ़ॉन्ट के लिए कस्टम फ़ॉन्ट के साथ मेमोरी लीक अहस्ताक्षरित सही Shift '>>> जावा में ऑपरेटर कैसे स्मृति leaks को रोकने के लिए node.js? ऑब्जेक्ट नाम से पहले एकल और एक डबल अंडरस्कोर का क्या अर्थ है? LINQ के साथ सूची में डुप्लीकेट कैसे गणना करें एंड्रॉइड में अनुवाद एनीमेशन के साथ एक दृश्य को कैसे सजीव करना यादृच्छिक सूची से कोई आइटम कैसे चुनें? पायथन urllib2 बेसिक एथ समस्या जावास्क्रिप्ट में संदर्भ के द्वारा एक स्ट्रिंग पास करें SQL सर्वर में दिनांक और समय से तारीख पाने के लिए सबसे प्रभावी तरीका है? विजुअल स्टूडियो 2012/2013 के साथ एसएसआईएस बिड का उपयोग करना मैं MySQL में गैर- ASCII वर्ण कैसे पा सकता हूं? क्या बाइनरी छवि डेटा को HTML मार्कअप में रखना संभव है और फिर किसी भी ब्राउज़र में छवि को सामान्य रूप में प्रदर्शित किया जा सकता है? टॉमकेस सर्वलेट ऐप के लिए पृष्ठभूमि थ्रेड आईई डिस्प्ले: तालिका-सेल बच्चा ऊंचाई की उपेक्षा करता है: 100%

सीएसएस में ही तीर कैसे बनाऊँ?

मैं एक जादूगर की तरह ऑर्डर करने की प्रक्रिया बना रहा हूं जहां मेरा यह मेनू है: मेन्यू

सक्रिय पृष्ठ रंग का हरा है (इस मामले में, मॉडल)।

एक ही सीएसएस का प्रयोग करके यह तीर कैसे बना सकता है?

तीर

फिलहाल मैं कई दिशों और छवियों का उपयोग करके अपने लक्ष्य को प्राप्त कर रहा हूं:

<div class="menuItem"> <div></div> <!-- The left image --> <div>Varianten</div> <div></div> <!-- The right image --> </div> 

बाईं छवि: यहां छवि विवरण दर्ज करें

सही छवि: यहां छवि विवरण दर्ज करें

मुझे एक ऐसा जवाब मिला जो इसका एक हिस्सा है: सीएसएस के साथ एरो बॉक्स , हालांकि मुझे बाएं ओर इंडेंट के साथ परेशानी हो रही है

अगर आपको यह कैसे करना है इसके बारे में एक बेहतर विचार है, तो कृपया मुझे बताएं!

वेब के समाधान से एकत्रित समाधान "सीएसएस में ही तीर कैसे बनाऊँ?"

यदि तीरों के बीच की जगह पारदर्शी ( यह ठोस रंग है ) की आवश्यकता नहीं है, तो आप इसका उपयोग कर सकते हैं :before और :after किनारों को बनाने के :after ( डोम में नए तत्वों के बिना )

असल में, यह हम चाहते सीमाओं के साथ घुमाए गए वर्ग बनाता है और उन्हें तदनुसार रखता है

 #flowBoxes { margin:auto; padding:20px; min-width:700px; } #flowBoxes div { display:inline-block; position:relative; height:25px; line-height:25px; padding:0 20px; border:1px solid #ccc; margin-right:2px; background-color:white; } #flowBoxes div.right:after{ content:''; border-top:1px solid #ccc; border-right:1px solid #ccc; width:18px; height:18px; position:absolute; right:0; top:-1px; background-color:white; z-index:150; -webkit-transform: translate(10px,4px) rotate(45deg); -moz-transform: translate(10px,4px) rotate(45deg); -ms-transform: translate(10px,4px) rotate(45deg); -o-transform: translate(10px,4px) rotate(20deg); transform: translate(10px,4px) rotate(45deg); } #flowBoxes div.left:before{ content:''; border-top:1px solid #ccc; border-right:1px solid #ccc; width:18px; height:18px; position:absolute; left:0; top:-1px; background-color:white; z-index:50; -webkit-transform: translate(-10px,4px) rotate(45deg); -moz-transform: translate(-10px,4px) rotate(45deg); -ms-transform: translate(-10px,4px) rotate(45deg); -o-transform: translate(-10px,4px) rotate(20deg); transform: translate(-10px,4px) rotate(45deg); } #flowBoxes .active{ background-color:green; color:white; } #flowBoxes div.active:after{ background-color:green; } 
 <div id="flowBoxes"> <div class="right">Diersoort / I&amp;R</div> <div class="left right active">Model</div> <div class="left right">Varianten</div> <div class="left right">Bedrukkingen</div> <div class="left">Bevestiging</div> </div> 

यहां CSS3 सुविधाओं का उपयोग करके पूरी बात के लिए एक वैकल्पिक दृष्टिकोण है इस पद्धति का उपयोग करने का एक फायदा (और एक अलग जवाब जोड़ने के मुख्य कारणों में से एक) यह है कि तीरों के बीच की जगह पारदर्शी हो सकती है।

मूल रूप से कार्यान्वयन इस प्रकार है:

  1. प्रत्येक चरण / आइटम के लिए एक div और इसमें उस पाठ को प्रदर्शित किया जाना चाहिए, जिसे प्रदर्शित किया जाना चाहिए। हम कहते हैं कि इस div की height x (50px इस उदाहरण में) है।
  2. दो छद्म तत्वों ( :before और :before :after ) उनकी width के साथ माता पिता की div और माता पिता के आधे ( x/2 ) की height के समान बनाए जाते हैं। :before तत्व से पहले कोई border-bottom होता है :after तत्व के आकार के बीच में दिखाई देने वाली रेखा से बचने के लिए कोई border-top नहीं है (एक्स-अक्ष के समानांतर)।
  3. ये दो छद्म-तत्व तब विपरीत दिशा में परिवर्तित skew होते हैं और इस तरह से तैनात होते हैं कि वे सीधे एक-दूसरे से नीचे होते हैं और इस प्रकार आवश्यक आकार बनाते हैं।
  4. छद्म तत्वों को एक नकारात्मक z-index निर्दिष्ट किया जाता है ताकि वे माता-पिता (और इसलिए इसके पाठ) के पीछे हो जाएं।
  5. सीधे-पक्षों को प्राप्त करने के लिए first-child और last-child तत्वों को थोड़ा संशोधित किया जाता है ( left स्थिति, छद्म-तत्वों की border , background और माता-पिता की border )।
  6. हम सक्रिय तत्वों के लिए एक active वर्ग जोड़ सकते हैं और प्रभावों को नीचे दिए नमूने जैसे आकृतियों पर भी प्रभाव hover सकते हैं।
 .steps { height: 50px; width: 150px; text-align: center; line-height: 50px; position: relative; margin: 10px 0px 10px 20px; display: inline-block; } .steps:before, .steps:after { content: ''; position: absolute; left: 0px; width: 150px; height: 25px; z-index: -1; } .steps:before { top: -2px; border-top: 2px solid blue; border-right: 2px solid blue; border-left: 2px solid blue; background: lightblue; -moz-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .steps:after { bottom: -2px; border-left: 2px solid blue; border-right: 2px solid blue; border-bottom: 2px solid blue; background: lightblue; -moz-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); } .steps:last-child { background: lightblue; border-right: 2px solid blue; border-top: 2px solid blue; border-bottom: 2px solid blue; margin-left: 38px; } .steps:first-child { background: lightblue; border-left: 2px solid blue; border-top: 2px solid blue; border-bottom: 2px solid blue; margin-right: 18px; } .steps:first-child:before, .steps:first-child:after { left: 18px; } .steps:last-child:before, .steps:last-child:after { left: -18px; } /* Hover Styles */ .steps:first-child:hover, .steps:last-child:hover, .steps:hover:before, .steps:hover:after { background: lightgreen; } .steps:first-child:hover { border-left: 2px solid green; } .steps:last-child:hover { border-right: 2px solid green; } .steps:hover:before { border-top: 2px solid green; border-right: 2px solid green; border-left: 2px solid green; } .steps:hover:after { border-left: 2px solid green; border-right: 2px solid green; border-bottom: 2px solid green; } .steps:first-child:hover, .steps:last-child:hover { border-top: 2px solid green; border-bottom: 2px solid green; } /* Active Styles */ .active:first-child, .active:last-child, .active:before, .active:after{ background: bisque; } .active:first-child{ border-left: 2px solid red; } .active:last-child{ border-right: 2px solid red; } .active:before{ border-top: 2px solid red; border-right: 2px solid red; border-left: 2px solid red; } .active:after{ border-left: 2px solid red; border-right: 2px solid red; border-bottom: 2px solid red; } .active:first-child, .active:last-child{ border-top: 2px solid red; border-bottom: 2px solid red; } /* Just for creating a non solid color background */ body{ height: 200px; background: -webkit-radial-gradient(center, ellipse, #400, #100); background: -moz-radial-gradient(center, ellipse, #400, #100); background: radial-gradient(center, ellipse, #400, #100); } 
 <div class='steps-container'> <div class='steps'>1. Step 1</div> <div class='steps active'>2. Step 2</div> <div class='steps'>3. Step 3</div> </div> 

यहां आपके लिए कुछ महान तीर हैं

 html{ background-color:red; } div#page { padding-bottom: 40px; padding-top: 40px; text-align: center; z-index: 1; position: relative; } div.diamond, div.ribbon, div.right-arrow, div.left-arrow { display: inline-block; color: #FFFFFF; font-size: 22px; line-height: 38px; margin: 15px 0; position: relative; width: 200px; } div.diamond:before, div.diamond:after, div.ribbon:before, div.ribbon:after, div.right-arrow:before, div.right-arrow:after, div.left-arrow:before, div.left-arrow:after { content:""; border-style: solid; border-width: 0; height: 0; position: absolute; width: 0; } div.diamond { background-color: #CCCCCC; } div.diamond:after, div.diamond:before { border-color: transparent #CCCCCC; } div.diamond:before { left: -19px; border-width: 19px 19px 19px 0; } div.diamond:after { right: -19px; border-width: 19px 0 19px 19px; } div.ribbon { background-color: #CCCCCC; } div.ribbon:before, div.ribbon:after { top: 6px; z-index: -15; } div.ribbon:before { border-color: #B2B2B2 #B2B2B2 #B2B2B2 transparent; border-width: 19px; left: -25px; } div.ribbon:after { border-color: #B2B2B2 transparent #B2B2B2 #B2B2B2; border-width: 19px; right: -25px; } div.right-arrow { background-color: #CCCCCC; } div.right-arrow:after, div.right-arrow:before { border-width: 19px 0 19px 19px; } div.right-arrow:before { border-color: #CCCCCC transparent; left: -19px; } div.right-arrow:after { border-color: transparent #CCCCCC; right: -19px; } div.left-arrow { background-color: #CCCCCC; } div.left-arrow:after, div.left-arrow:before { border-width: 19px 19px 19px 0; } div.left-arrow:before { border-color: transparent #CCCCCC; left: -19px; } div.left-arrow:after { border-color: #CCCCCC transparent; right: -19px; } 
 <div id="page"> <div class="diamond">Diamond</div> <br> <div class="ribbon">Ribbon</div> <br> <div class="right-arrow">Right arrow</div> <br> <div class="left-arrow">Left arrow</div> </div> 

यदि आप टैब के बीच पारदर्शी रिक्त स्थान चाहते हैं, हैरी का वर्तमान उत्तर वे जाने का तरीका है

लेकिन अगर आप मंडराने के मुद्दों को हटाना चाहते हैं, तो आप निम्न प्रयास कर सकते हैं। यह ठोस रंग के साथ पृष्ठभूमि के बजाय छद्म तत्वों के लिए box-shadow का उपयोग करता है
एक ही प्रभाव border: _px inset #___ ; का उपयोग करने योग्य border: _px inset #___ ;

 .li { height: 50px; width: 120px; background: #F5FBF1; display: inline-block; position: relative; margin-left: 30px; line-height: 50px; color: black; font-family: sans-serif; text-align: center; } .li:before, .li:after { content: ''; left: -15px; position: absolute; height: 23px; width: 132px; border-left: 2px solid black; border-right: 2px solid black; } .li:before { border-top: 2px solid black; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: skewX(30deg); -moz-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewX(30deg); top: 0; box-shadow: inset 0 8px 0 8px #F5FBF1, inset -6px 8px 0 8px #F5FBF1; } .li:after { border-bottom: 2px solid black; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: skewX(-30deg); -moz-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); bottom: 0; box-shadow: inset 0 -8px 0 8px #F5FBF1, inset -6px -8px 0 8px #F5FBF1; } .li:hover { background: #C0EBA4; } .li:hover:before { box-shadow: inset 0 8px 0 8px #C0EBA4, inset -6px 8px 0 8px #C0EBA4; } .li:hover:after { box-shadow: inset 0 -8px 0 8px #C0EBA4, inset -6px -8px 0 8px #C0EBA4; } 
 <div class="li">ONE</div> <div class="li">TWO</div> <div class="li">THREE</div> <div class="li">FOUR</div> <div class="li">FIVE</div>