CSS border三角的一个应用实例
发布时间：2018-10-13 04:19:38 所属栏目：经验 来源：站长网
导读：早上了解到一个名为css border三角的技术，纯css2实现,兼容各浏览器(包括Ie6)，且效果非常好，当时即内牛满面，顿感牛人之强大。自己不敢不有样学样，赶紧做了个应用demo,练手之余也能向更多的盆友介绍此技术。效果如下: 常用联系人 常用联系人 常用联系人
|
早上了解到一个名为"css border三角"的技术，纯css2实现,兼容各浏览器(包括Ie6)，且效果非常好，当时即"内牛满面"，顿感牛人之强大。自己不敢不有样学样，赶紧做了个应用demo,练手之余也能向更多的盆友介绍此技术。效果如下: 常用联系人常用联系人常用联系人大家请注意： 1.外边框部分:会发现是"圆角"。 2:三角部分:哇！居然不是图片。再点击，哇，太牛x了。 纯css2实现，效果明显，技术简单，真是老少皆宜啊。demo代码如下: Copy to Clipboard 引用的内容：[www.veryhuo.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 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.veryhuo.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> （编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
