快速业务通道

CSS实例教程:Border属性制作小三角

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-01

仔细琢磨了一下运用的还是很巧妙的,在现实的前端开发中也很有用,至少可以减小图片的字节。

先看看应用实例吧:

11

实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如

.box{
width:0px;
height:0;
border-bottom:50px #F00 solid;
border-left:50px #03F solid;
border-right: 50px #F90 solid;
border-top:50px #6C0 solid;
}

在浏览器中的显示如图:

2009-09-14_225923

这样就有上下左右四个三角形了,再把除了要用的三角外的其他3个三角(border)颜色设置为背景色就ok了。

例如这样就能得到一个颜色为#CCC的向上的三角:

.to-top{
display:block;
overflow:hidden;
width:0px;
height:0px;
border:6px solid #ccc;
border-color:#ccc #fff;
border-width:0 6px 6px 6px;
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号