css3 - How to create a speech bubble in css? -

-

मैं इस तरह एक भाषण बनाना चाहता हूं,

मैं सीएसएस का उपयोग करने की कोशिश करता हूं। लेकिन मैं इस तरह शीर्ष तीर को संरेखित नहीं कर सकता। मेरा कोड है, 

  .bubble {स्थिति: रिश्तेदार; चौड़ाई: 275 पीएक्स; ऊंचाई: 40px; पैडिंग: 5 पीएक्स; पृष्ठभूमि: # C00006; -विबिट-सीमा-त्रिज्या: 14px; -मोझ-सीमा-त्रिज्या: 14px; सीमा-त्रिज्या: 14px; } .bubble: after {सामग्री: ''; स्थिति: पूर्ण; सीमा-शैली: ठोस; सीमा चौड़ाई: 0 19px 79px; सीमा रंग: # C00006 पारदर्शी; प्रदर्शन क्षेत्र; चौड़ाई: 0; Z- सूचकांक: 1; मार्जिन-बाएं: -19 पिक्सेल; शीर्ष: -79 पीएक्स; बाएं: 69%; }  
  & lt; br & gt; & lt; br & gt; & lt; br & gt; & lt; br & gt; & Lt; div class = "bubble" & gt; & lt; / div & gt;

(पर JSFiddle) ।

आप इसे निम्नानुसार उपयोग और निर्दिष्ट करके प्राप्त कर सकते हैं: 

  .bubble {स्थिति: रिश्तेदार; शीर्ष: 4.8em; चौड़ाई: 275 पीएक्स; ऊंचाई: 40px; पैडिंग: 5 पीएक्स; पृष्ठभूमि: # C00006; -विबिट-सीमा-त्रिज्या: 14px; -मोझ-सीमा-त्रिज्या: 14px; सीमा-त्रिज्या: 14px; } .bubble: after {सामग्री: ''; स्थिति: पूर्ण; सीमा-शैली: ठोस; सीमा चौड़ाई: 0 19px 79px; सीमा रंग: # C00006 पारदर्शी; प्रदर्शन क्षेत्र; चौड़ाई: 0; Z- सूचकांक: 1; / * शीर्ष: -79 पीएक्स; * / नीचे: 100%; / * शीर्ष * / सही निर्दिष्ट करने से बेहतर: 38px; / * तीर की चौड़ाई के बराबर, उदाहरण के लिए * / -webkit-transform: skewX (-45deg); -मोज़-ट्रांसमेंस: स्काईएक्स (-45 डिग्री); -एमएमएस-ट्रांसमेंस: स्क्वैक्स (-45 डिग्री); -ओ-परिणत: स्क्वैक्स (-45 डिग्री); परिणत: स्क्वैक्स (-45 डिग्री); -वेबकिट-परिवर्तन-मूल: 38px 100%; -मोज-ट्रांसफॉर्म-मूल: 38px 100%; -एमएमएस-ट्रांसफॉर्म-मूल: 38px 100%; -ओ-परिवर्तन-मूल: 38px 100%; परिवर्तन-मूल: 38px 100%; }  
  & lt; div class = "bubble" & gt; & lt; / div & gt;  <

यह ध्यान देने योग्य है कि सीएसएस रूपांतरण और नया।


Comments

Post a Comment

Popular posts from this blog

mysql - How to enter php data into a html multiple select box -

-
I am working on a page that will create a team. I just want to create a selection box which will list all the users of all the users. After that, the user can select more than one friend (i.e. 5) and can send the request to these 5 people to join the team but I am having problems I did this: Select $ sql = "Select i. *, Join * Connect with M * m.id = i.clique_id where adder_id =: id"; $ Stmt = $ db- & gt; Query ($ sql, array ('id' = & gt; $ _SESSION ['id'])); While ($ record = $ stmt-> fetch ()) {$ surname = $ record ['surname']; } and this: & lt; Select multiple = "true" name = "category" well id = "category" name = "category" category = "" & gt; & Lt; Option value = "& lt ;? php echo $ surname ;? & gt;" & Gt; & Lt ;? Php ek $ nickname; ? & Gt; & Lt; / Options & gt; & Lt; / Select & gt; But only a friend's nickname...
Read more

java - How to drag a JavaFX node and detect a drop event outside the JavaFX Windows? -

-
I am implementing a tabkin that can be separated from the JavaFX window. When the tab panel is pulled out of the window where it came from, I have to create a new window and the tab to be placed in that window. I have already applied some methods using drag gestures, drag the tab between the existing window. However, when I'm taking a mouse out of javax sequences, I'm not able to get any mouse events or drag events. Is this something possible? You can listen to a mouse release incident on the appropriate node (like the graphic of the tab). Check the screen coordinates using MouseEvent.getScreenX () and MouseEvent.getScreenY () and see if they are out of the current window. If they do, create a new window, view and tab panel; Remove the tab from the current tab panel and place it in a new location. There is no fundamental example with no frills (for example, a user does not indicate that the dragging is happening), but you should consider this: import Please ...
Read more

asp.net mvc - How to attach sql database to a javascript graph -

-
I am creating a website using asp mvc5 and I need to show some data on a view using the graph I have implemented a graph using javascript. & lt; Head & gt; & Lt; Script src = "../../ js / jquery-1.11.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "../../JS/chart.cript.js" & gt; & Lt; / Script & gt; @ * & Lt; Link rel = "stylesheet" href = "../../ css / last stylesheet css" & gt; * @ & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "col-md-12" & gt; & Lt; Div class = "panel-panel-default" & gt; & Lt; Div class = "panel-title" & gt; Daily booking & lt; / Div & gt; @ * & Lt; Div class = "panel-body" & gt; * @ @ * & Lt; Div class = "col-lg-2" & gt; & Lt; / Div & gt; & Lt; Div class = "col-lg-8" style = "background-color: # 4876FF;" & G...
Read more