早上了解到一个名为"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.wfuyu.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>常用联系人</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> 总结
以上是内存溢出为你收集整理的CSS border三角的一个应用实例全部内容，希望文章能够帮你解决CSS border三角的一个应用实例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）