दिलचस्प पोस्ट
स्ट्रिंग में सभी अनूठे अक्षरों की सूची? एक समझदार, सुरक्षित और कुशल तरीके से एक फ़ाइल की प्रतिलिपि बनाएँ आइस क्रीम सैंडविच में HttpURL कनेक्शन के लिए FileNotFoundException बनाने और अद्यतन पर MySQL CURRENT_TIMESTAMP क्या सिम्फनी 2 में Doctrine2 Entitymanager कार्यान्वयन वर्ग निर्दिष्ट करने का एक तरीका है? एचटीटीपी क्लाइंट 4.0.1 – कनेक्शन कैसे रिलीज करना है? रेल: आंशिक रूप से स्थानीय लोगों को पारित करने के लिए वाक्यविन्यास के बारे में भ्रमित मैं एक डिस्प्ले कैसे बना सकता हूं: फ्लेक्स कंटेनर अपनी लिपटे हुई सामग्रियों के साथ क्षैतिज रूप से फैलता है? java.security.InvalidAlgorithmParameterException: ट्रांस्पर एन्कर्स पैरामीटर लिनक्स पर रिक्त नहीं होना चाहिए, या डिफ़ॉल्ट ट्रस्टस्टोअर खाली क्यों है एक्लिप्स का इस्तेमाल करते हुए लाइन से एंड्रॉइड एप्लिकेशन लाइन को डीबग कैसे करें? Guice का उपयोग करते हुए सामान्य कार्यान्वयन इंजेक्शन पायथन एक्जीक्यूटेबल नहीं खोजने के लिए libpython साझा पुस्तकालय घातक त्रुटि: अधिकतम 30 सेकंड का निष्पादन समय पार हो गया मैप किए गए ड्राइव को देखने के दौरान जावा वॉचसर्वाइजेशन नहीं उत्पन्न करता है छिपाएं सेट करेंबॉटमबार जब दृश्य नियंत्रक पॉप के बाद गायब हो गए पत्ते के नीचे पट्टी हटा दिए गए

सीएसएस के साथ एरो बॉक्स

मैं सीएसएस में यह बॉक्स कैसे बना सकता हूं?

मैंने कुछ ट्यूटोरियल देखा है जो तीरों के साथ बॉक्स बनाने का तरीका सिखाते हैं, हालांकि, मेरे मामले में, उन ट्यूटोरियल में से कोई भी उपयुक्त नहीं है I

डिब्बा

Solutions Collecting From Web of "सीएसएस के साथ एरो बॉक्स"

मैंने आपके तत्व को आसपास 1px सीमा के साथ बनाया है मैं एक <div> तत्व का उपयोग कर रहा हूं और इसका फायदा उठा रहा हूं :before और :after छद्म तत्वों ( ब्राउज़र-समर्थन ) के बाद। मुख्य आयत में एक नियमित 1px सीमा होती है, लेकिन त्रिभुज तत्व अनिवार्य रूप से 2 त्रिकोण होते हैं, दूसरे से एक गहरा होता है।

हल्का त्रिकोण गहरे त्रिकोण के शीर्ष पर बैठता है, जिसका छिपा हुआ प्रभाव पड़ता है, और नीचे गहरे त्रिकोण को दिखाने के लिए थोड़ा ऊपर ले जाया गया है। परिणामी भ्रम त्रिकोण पर एक 1px अंधेरे की सीमा है।

यहां एक सवाल है जो एक समान सवाल पूछता है:

शुद्ध सीएसएस का उपयोग करके मैं "टूलटिप पूंछ" कैसे बना सकता हूं?

वास्तव में इस जवाब में से एक का एक बड़ा स्पष्टीकरण है कि इस त्रिकोण के प्रभाव को कैसे प्राप्त किया जा सकता है:

https://stackoverflow.com/a/5623150/196921

इसके अलावा, यह सभी फैंसी चीजों के लिए एक उत्कृष्ट संदर्भ है जो आप सीमाओं के साथ कर सकते हैं ( धन्यवाद PSCoder ):

… और यहां एक मीठी सीएसएस जनरेटर है ( डेविड तैरोआ के लिए धन्यवाद ):


वैसे भी, यहां संगत कोड है:

  #arrow { width: 128px; height: 100px; background-color: #ccc; border: 1px solid #999; position: relative; } #arrow:after { content: ''; position: absolute; top: 0px; left: 128px; width: 0; height: 0; border: 50px solid transparent; border-left: 12px solid #ccc; } #arrow:before { content: ''; position: absolute; top: 0px; left: 129px; width: 0; height: 0; border: 50px solid transparent; border-left: 12px solid #999; } 
 <div id="arrow"></div> 

यहाँ मैं बनाया समाधान है

ऐसा करने के 2 सरल तरीके हैं पहला, कम कुशल तरीके से 2 तत्व होते हैं मैं इसका लाभ उठाता हूं :after छद्म तत्व के :after मैं position:absolute इस्तेमाल किया position:absolute पर position:absolute :after 2 कारणों के लिए :after

  1. आप उस तत्व को रख सकते हैं जहां आपको आवश्यकता है
  2. यह त्रिकोण का अंत होने से रोकता है

त्रिकोण बनाने की कुंजी border संपत्ति का उपयोग कर रहा है आपके transparent सेट के रंग के साथ 2 सीमाएं हैं। ये 2 सीमाएं दिशा के विपरीत हैं जिन्हें आप जाना चाहते हैं। इसलिए यदि आप एक सही त्रिकोण बनाना चाहते हैं, तो top और bottom उपयोग करें क्या तीर को आकार देता है वह आखिरी सीमा है यह विपरीत दिशा में भी जाता है। तो एक सही त्रिकोण के लिए, आप एक रंग के साथ border-left उपयोग करेंगे। इसे उचित ऊँचाई प्राप्त करने के लिए, आपको उस बॉक्स की ऊँचाई का आधा होना चाहिए जिसे आप इसे रखना चाहते हैं

SVG ऐसे आकार बनाने का अनुशंसित तरीका है। यह सादगी और पैमाने की क्षमता प्रदान करता है

हम SVG के polygon या path तत्व का उपयोग ऊपर और स्ट्रोक की तरह एक आकृति बनाने के लिए कर सकते हैं / इसे कुछ ठोस रंग, ढाल या एक पैटर्न के साथ भरें।

केवल एक विशेषता points का उपयोग polygon तत्व में आकृतियों को परिभाषित करने के लिए किया जाता है। इस विशेषता में अंक की एक सूची है। प्रत्येक बिंदु में 2 नंबर, एक एक्स समन्वय और एई निर्देशांक होना चाहिए। आकृति बंद करने के लिए एक सीधी रेखा अंतिम बिंदु से प्रारंभिक बिंदु पर स्वचालित रूप से तैयार की जाती है।

इस आकार को बनाने के लिए नीचे आवश्यक कोड है:

 <polygon points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="#eee" /> 

नीचे दिए गए कोड का एक संक्षिप्त विवरण है:

  • points विशेषता आकृति की संरचना को परिभाषित करता है
  • stroke विशेषता आउटलाइन / सीमा के लिए रंग को परिभाषित करता है
  • stroke-width रूपरेखा / सीमा की मोटाई को परिभाषित करती है
  • fill विशेषता आंतरिक आकार के लिए रंग को fill लिए परिभाषित करता है।

आउटपुट छवि:

बहुभुज आकार

काम का उदाहरण:

 body { background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat; background-position: center bottom; background-size: cover; margin: 0; } .box { justify-content: center; align-items: center; height: 100vh; display: flex; } 
 <div class="box"> <svg width="300" height="200" viewBox="0 0 300 200"> <polygon points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="#eee" /> </svg> </div>