I learned about a technology named "css border triangle" in the morning. It is implemented in pure css2 and compatible with various browsers (including Ie6). It worked very well. At that time, it was "inner niu ", sense of strength. I did not dare to learn the same things. I quickly started an application demo, and I could introduce this technology to more friends. The effect is as follows:
Common contacts common contacts
Note:
1. outer border: "rounded corner" is found ".
2: triangle: Wow! Not an image. Click again. Wow, too.
Pure css2 implementation, obvious effect, simple technology, is really suitable for all ages. The demo code is as follows:
Copy to ClipboardReference: [www.bkjia.com] <style type = "text/css">
Body {
Padding: 20px;
}
*{
Padding: 0;
Margin: 0;
}
. Br-test {
Width: 300px;
}
. Items {
Border-color: # ccc;
Border-style: solid;
Border-width: 0 2px;
Padding: 5px;
}
. Items-item {
Position: relative;
Border: # CCC 1px solid;
Height: 18px;
Margin: 5px 0 0 0;
}
. Items-item h3 {
Position: absolute;
Left: 24px;
Font-size: 14px;
}
. Items-item-triangle {
Position: absolute;
Left: 5px;
Width: 0;
Height: 0;
Overflow: hidden;
Font-size: 0;
Line-height: 0;
Border-color: transparent # CCC;
Border-style: dashed solid;
Border-width: 8px;
Cursor: pointer;
}
. Click {
Left: 0;
Top: 5px;
Border-color: # CCC transparent;
Border-style: solid dashed;
}
. Top-border {
Border-bottom: 3px solid # ccc;
Border-left: 3px dotted transparent;
Border-right: 3px dotted transparent;
}
. Bottom-border {
Border-top: 3px solid # ccc;
Border-left: 3px dotted transparent;
Border-right: 3px dotted transparent;
}
</Style>
<Script type = "text/javascript" src = "http://www.bkjia.com/uploads/common/js/jquery-1.4.2.min.js"> </script>
</Head>
<Body>
<Div class = "br-test">
<Div class = "top-border"> </div>
<Div id = "br-items" class = "items">
<Div class = "items-item">
<Div class = "items-item-triangle"> </div>
<H3> common contacts </Div>
<Div class = "items-item">
<Div class = "items-item-triangle"> </div>
<H3> common contacts </Div>
<Div class = "items-item">
<Div class = "items-item-triangle"> </div>
<H3> common contacts </Div>
</Div>
<Div class = "bottom-border"> </div>
</Div>
<Script type = "text/javascript">
$ (". Items-item-triangle", $ ("# br-items"). each (function (){
Var that = $ (this );
That. click (function (){
$ (This). toggleClass ("click ");
});
});
</Script>
