小李飞刀资源网 Design By www.iooab.com

    利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是他的border的叠加,由于相邻boder会重叠,故存在内容宽高时其实任意一边存在的border都是梯形的,当div内容宽高为0时,border就表现为三角形,将四个border的颜色设置为transparent表示边框透明,而将右边框颜色再设置为红色就发现三角形出现了,其实这个三角形是右边框。

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width: 0px;    
  7.             height: 0px;   
  8.             border: 100px solid transparent;   
  9.             border-right:  100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

    图解

    正常的框模型,div的内容width以及height均为50px.黑线划出来的区域就是它的右边框,呈现为一个梯形

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width: 50px;    
  7.             height: 50px;   
  8.             border: 100px solid red;    
  9.             border-bottom: 100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

用CSS3绘制三角形的简单方法

    当div的内容width以及height均为0.黑线划出来的区域就是它的右边框,呈现为一个三角形

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width: 0px;    
  7.             height: 0px;   
  8.             border: 100px solid red;    
  9.          }   
  10.     </style>   
  11.     <div id="triangle-up"></div>   
  12. </body>   
  13. </html>  

用CSS3绘制三角形的简单方法

    当div的内容width以及height均为0.上下左边框都为透明的时候,只有右边框显示为红色,三角形就看到了

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width: 0px;    
  7.             height: 0px;   
  8.             border: 100px solid transparent;   
  9.             border-right:  100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

用CSS3绘制三角形的简单方法

结合css其他特性定能做出更有趣的一些效果!

标签:
CSS3,三角形

小李飞刀资源网 Design By www.iooab.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
小李飞刀资源网 Design By www.iooab.com