首页>>技术前沿>>B/S,C/S软件系统开发
用css的border属性实现仿图片三角
作者：西安网站建设 | 原创 来源：西安百度优化 | 时间：2010年4月23日| 点击:0次 | 【评论】

先看看应用实例吧：

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

    css>
  1. .box{  
  2. width:0px;  
  3. height:0;  
  4. border-bottom:50px #F00 solid;  
  5. border-left:50px #03F solid;  
  6. border-right: 50px #F90 solid;  
  7. border-top:50px #6C0 solid;  
  8. }  

在浏览器中的显示如图：

 
这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。例如这样就能得到一个颜色为#CCC的向上的三角：
    css>
  1. .to-top{  
  2. display:block;  
  3. overflow:hidden;  
  4. width:0px;  
  5. height:0px;  
  6. border:6px solid #ccc;  
  7. border-color:#ccc #fff;  
  8. border

此内容DOC下载　此内容PDF下载

【全文完】
关键词标签:　css　图片三角　
0 (1)
0 (0)

版权声明:

1、陕西弈聪网站内容中凡注明“来源：XXX（非陕西弈聪网站）”的作品，转载自其它媒体，转载目的在于传递更多信息，其中涉及的网站建设，网站优化，百度关键词优化，西安软件开发等技术细节并不代表本站赞同支持其观点，并不对其真实性负责。对于署名“陕西弈聪”的作品系本站版权所有，任何人转载请署名来源，否则陕西弈聪将追究其相关法律责任。

2、本站内容中未声明为“原创”的内容可能源自其它网站，但并不代表本站支持其观点，对此带来的法律纠纷及其它责任与我方无关。如果此内容侵犯了您的权益，请联系我方进行删除。