CSS border三角的一個應用實例
來源：程序員人生 發布時間：2014-05-08 17:23:48 閱讀次數：3370次
早上了解到一個名為"css border三角"的技術，純css2實現,兼容各瀏覽器(包括Ie6)，且效果非常好，當時即"內牛滿面"，頓感牛人之強大。自己不敢不有樣學樣，趕緊做了個應用demo,練手之余也能向更多的盆友介紹此技術。效果如下:
大家請注意：
1.外邊框部分:會發現是"圓角"。
2:三角部分:哇！居然不是圖片。再點擊，哇，太牛x了。
純css2實現，效果明顯，技術簡單，真是老少皆宜啊。demo代碼如下:
<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 transparent transparent #CCC;
border-style:dashed dashed dashed solid;
border-width:8px;
cursor:pointer;
}
.click{
left:0;
top:5px;
border-color:#CCC transparent transparent transparent;
border-style:solid dashed dashed 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.vxbq.cn/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>常用聯系人</h3>
</div>
<div class="items-item">
<div class="items-item-triangle"></div>
<h3>常用聯系人</h3>
</div>
<div class="items-item">
<div class="items-item-triangle"></div>
<h3>常用聯系人</h3>
</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>
