![](/images/titleicon.gif)
用css的border属性实现仿图片三角
先看看应用实例吧:
![](/uploadfile/2010-4/20100423104434942.jpg)
实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如
css>
- .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;
- }
在浏览器中的显示如图:
![](http://www.okajax.com/uploads/allimg/091108/1_0Z502325.png)
这样就有上下左右四个三角形了,再把除了要用的三角外的其他3个三角(border)颜色设置为背景色就ok了。例如这样就能得到一个颜色为#CCC的向上的三角:
【全文完】css>
- .to-top{
- display:block;
- overflow:hidden;
- width:0px;
- height:0px;
- border:6px solid #ccc;
- border-color:#ccc #fff;
- border
0 (1)
0 (0)
版权声明:
1、陕西弈聪网站内容中凡注明“来源:XXX(非陕西弈聪网站)”的作品,转载自其它媒体,转载目的在于传递更多信息,其中涉及的网站建设,网站优化,百度关键词优化,西安软件开发等技术细节并不代表本站赞同支持其观点,并不对其真实性负责。对于署名“陕西弈聪”的作品系本站版权所有,任何人转载请署名来源,否则陕西弈聪将追究其相关法律责任。
2、本站内容中未声明为“原创”的内容可能源自其它网站,但并不代表本站支持其观点,对此带来的法律纠纷及其它责任与我方无关。如果此内容侵犯了您的权益,请联系我方进行删除。
![](/images/titleicon.gif)