<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "> <HTMLxmlns= "http://www.w3.org/1999/xhtml"> <HTML> <Head> <MetaCharSet= "Utf-8" /> <Metaname= "Author"content= "Gbin1.com" /> <title>Pure CSS implementation of Bubble balloon 丨 Qinhuangdao Light Partition board</title> <styletype= "Text/css">Body{font-size:14px;font-family:Arial;background:#CCC; }#container{margin:0 Auto;width:600px;Padding-top:10px; }H1{font-size:28px;margin:5px; } /*Bubble*/. Tip-bubble{position:relative;Background-color:#202020;width:100px;padding:20px;Color:#CCC;text-align:Center;Border-radius:10px;margin:50px;Border:1px solid #111;Box-shadow:1px 1px 2px #202020;-moz-box-shadow:1px 1px 2px #202020;-webkit-border-shadow:1px 1px 2px #202020;Text-shadow:0px 0px 15px #fff; }. Tip-bubble:after{content:"';position:Absolute;width:0;Height:0;Border:15px Solid; } /*Position the Arrow*/. Tip-bubble-top:after{Border-bottom-color:#202020; Left:50%;Bottom:100%;Margin-left:-15px; }. Tip-bubble-right:after{Border-left-color:#202020; Left:100%;Top:50%;Margin-top:-15px; }. Tip-bubble-bottom:after{Border-top-color:#202020;Top:100%; Left:50%;Margin-left:-15px; }. Tip-bubble-left:after{Border-right-color:#202020;Top:50%; Right:100%;Margin-top:-15px; } </style> </Head> <Body> <DivID= "Container"> <H1>Bubble Tips by CSS</H1> <Divclass= "Tip-bubble tip-bubble-left">Welcome to csrcode.cn</Div> <Divclass= "Tip-bubble tip-bubble-right">Arrow on Bottom</Div> <Divclass= "Tip-bubble tip-bubble-bottom">Welcome to csrcode.cn</Div> </Div> </Body> </HTML> <BR><BR><HR>
Bubble balloon with pure CSS implementation