In the interface sometimes need to display a hint, most of the front-end frame to make a hint with a small sharp corner of the box, so they also modeled the implementation of a bit, as follows:
The implementation of the sharp angle is very simple, it is generally through the CSS to set the width of the div to 0, and then the sharp angle toward the side of the width of the edge set to 0, and then to the sides of the border set width to a number greater than 0, and set the color to transparent, and then set the remaining border width and color.
Here's how I implement it:
The first is the corresponding HTML file:
<!DOCTYPE><HTML> <Head> <title>Tip_demo</title> <Linkrel= "stylesheet"href= "Css/tip.css"> <Scriptsrc= "Js/jquery-2.2.3.js"></Script> <Scriptsrc= "Js/tip.js"></Script> <Script> $(function() {lefttip (); Righttip (); Toptip (); Bottomtip (); }); </Script> <style>. Tip-left,. Tip-right,. tip-top,. Tip-bottom{width:250px; } </style> </Head> <Body> <Divclass= "Tip-left">This is the left arrow tip</Div> <BR> <Divclass= "Tip-right">This was right arrow tip</Div> <BR> <Divclass= "Tip-Top">This is top arrow tip</Div> <BR> <Divclass= "Tip-bottom">This is bottom arrow tip</Div> </Body></HTML>
CSS file:
. Tip-left-arrow{width:0;Height:0;Border-left:0px solid Transparent;Border-top:5px Solid Transparent;Border-right:10px Solid Gray;Border-bottom:5px Solid Transparent;Display:Inline-block;}. Tip-left-content{Display:Inline-block;Height:50px;Line-height:50px;vertical-align:Middle;Background-color:Gray;Border-radius:10px;padding:5px;Padding-left:10px;text-align: Left;}. Tip-right-arrow{width:0;Height:0;Border-right:0px solid Transparent;Border-top:5px Solid Transparent;Border-left:10px Solid Gray;Border-bottom:5px Solid Transparent;Display:Inline-block;}. Tip-right-content{Display:Inline-block;Height:50px;Line-height:50px;vertical-align:Middle;Background-color:Gray;Border-radius:10px;padding:5px;Padding-right:10px;text-align: Right;}. Tip-top-arrow{width:0;Height:0;Border-top:0px solid Transparent;Border-left:5px Solid Transparent;Border-bottom:10px Solid Gray;Border-right:5px Solid Transparent;Display:Inline-block;}. Tip-top-content{Height:50px;Line-height:50px;vertical-align:Middle;Background-color:Gray;Border-radius:10px;padding:5px;Padding-left:10px;}. Tip-bottom-arrow{width:0;Height:0;Border-bottom:0px solid Transparent;Border-left:5px Solid Transparent;Border-top:10px Solid Gray;Border-right:5px Solid Transparent;Display:Inline-block;}. Tip-bottom-content{Height:50px;Line-height:50px;vertical-align:Middle;Background-color:Gray;Border-radius:10px;padding:5px;Padding-right:10px;}
Finally, the JS file:
functionLefttip () {varContent = $ (". Tip-left"). text (); $(". Tip-left"). Text (""); $(". Tip-left"). Append ("<div class= ' Tip-left-arrow ' ></div>"); $(". Tip-left"). Append ("<div class= ' tip-left-content ' >" + content + "</div>");}functionRighttip () {varContent = $ (". Tip-right"). text (); $(". Tip-right"). Text (""); $(". Tip-right"). Append ("<div class= ' tip-right-content ' >" + content + "</div>"); $(". Tip-right"). Append ("<div class= ' Tip-right-arrow ' ></div>");}functionToptip () {varContent = $ (". Tip-Top"). text (); $(". Tip-Top"). Text (""); $(". Tip-Top"). Append ("<div class= ' Tip-top-arrow ' ></div>"); $(". Tip-Top"). Append ("<div class= ' tip-top-content ' >" + content + "</div>"); $(". Tip-Top"). CSS ("text-align", "center");}functionBottomtip () {varContent = $ (". Tip-bottom"). text (); $(". Tip-bottom"). Text (""); $(". Tip-bottom"). Append ("<div class= ' tip-bottom-content ' >" + content + "</div>"); $(". Tip-bottom"). Append ("<div class= ' Tip-bottom-arrow ' ></div>"); $(". Tip-bottom"). CSS ("text-align", "center");}
Implementation requires the support of jquery.
Encapsulating the Tip control