बैलून सीएसएस

प्रस्तावना

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

शुरुआत के लिए, सभी कोड को सूचीबद्ध करना

एचटीएमएल मार्कअप (इसके बाद हम बिना किसी स्थान के साथ कार्यान्वयन का वर्णन करेंगे)

<p class="balloon"> <span class="arrow"> </span>My CSS balloon </p> 

सीएसएस

 .balloon{ position:absolute; left:40px; top:20px; width:200px; height:auto; /*     */ background:#fff; padding:10px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; } .balloon>.arrow{ position:absolute; left:-10px; top:50%; margin-top:-10px; display:block; width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; } 

और अब, क्रम में

CSS का उपयोग करके त्रिभुज कैसे बनाएं?

 .balloon>.arrow{ width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; } 

यह विधि कैसे काम करती है, इसका दृश्य विवरण:

ऊर्ध्वाधर के केंद्र में त्रिकोण को कैसे संरेखित करें?

सबसे पहले, मैं आपको याद दिलाता हूं कि एक तत्व ए, पूर्ण स्थिति के साथ, तत्व बी में लिपटे रिश्तेदार (या निरपेक्ष) स्थिति के साथ, तत्व बी के ऊपरी बाएं कोने में शून्य निर्देशांक होगा (यानी यह तत्व बी के अंदर स्थित होगा)

 .balloon{ position:absolute; } .balloon>.arrow{ position:absolute; } 

अब आपको ऊर्ध्वाधर के केंद्र में त्रिभुज को संरेखित करने की आवश्यकता है, इस तथ्य को ध्यान में रखते हुए कि गुब्बारे की ऊंचाई स्थिर नहीं है। यह निम्नानुसार किया जाता है:

top = balloonHeight/2 - arrowHeight/2

लेकिन, हम CSS का उपयोग करके गुब्बारा ऊंचाई नहीं प्राप्त कर सकते हैं। इसके चारों ओर एक सुंदर रास्ता है।

बैलून की ऊंचाई के 50 प्रतिशत पर Y को त्रिकोण में संरेखित करें (बैलूनहाइट / 2 की जगह)

 .balloon>.arrow{ position:absolute; top:50%; } 

गुब्बारे की आधी ऊंचाई से, आपको त्रिकोण की आधी ऊंचाई को घटाना होगा:

 .balloon>.arrow{ position:absolute; top:50%; margin-top:-10px; } 

इसी तरह, क्षैतिज के केंद्र में संरेखण किया जाता है।

डेमो

स्थिर ऊंचाई के साथ: jsfiddle.net/mdQzH/362
गतिशील ऊंचाई के साथ: jsfiddle.net/mdQzH/465

का उपयोग कर रिलीज: चयनकर्ता और सामग्री संपत्ति से पहले

Dshster के अनुरोध पर

एचटीएमएल

 <p class="balloon"> Balloon </p> 

सीएसएस

 .balloon{ display:block; position:absolute; left:40px; top:20px; width:200px; height:auto; /*     */ background:#fff; padding:10px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; } .balloon:before{ content: '.'; position:absolute; left:-10px; top:50%; margin-top:-10px; display:block; width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; } 

डेमो

jsfiddle.net/mdQzH/474

छाया के साथ गुब्बारा

Niko83 के अनुरोध पर

एचटीएमएल

 <p class="balloon"> Balloon </p> 

सीएसएस

 .balloon{ display:block; position:absolute; left:40px; top:10px; width:200px; height:auto; background:#fff; padding:10px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; moz-box-shadow:0 0 7px #bbb; -webkit-box-shadow:0 0 7px #bbb; box-shadow:0 0 7px #bbb; } .balloon:before{ content:" "; position:absolute; left:-10px; top:50%; margin-top:-10px; z-index:1; display:block; width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 11px solid #fff; /*         */ } .balloon:after{ content:" "; position:absolute; left:0px; top:50%; margin-top:-2px-; z-index:0; display:block; width: 4px; height: 4px; moz-box-shadow:-8px 0 7px #555; -webkit-box-shadow:-8px 0 7px #555; box-shadow:-8px 0 7px #555; } 

एक छोटे ब्लॉक को एक बड़े त्रिकोण के नीचे रखा गया है, ताकि यह त्रिकोण में फिट हो। उन्हें एक शैली को एक छाया के साथ सौंपा गया है। ध्यान रखें कि किनारों पर छाया का रंग संतृप्त कम होता है, इसलिए उदाहरण में छाया रंग # 555 है, न कि #bb

डेमो

jsfiddle.net/mdQzH/586