国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > 用CSS border相关属性画三角形

用CSS border相关属性画三角形

来源:程序员人生   发布时间:2014-08-16 17:14:52 阅读次数:5689次
用CSS border相关属性画三角形,大家在制作网站前端的是时候,经常喜欢在新闻或者产品分类列表前面加一个小三角形,这样比较美观。通常的做法是直接用PS绘制小三角形,然后设置成背景色就可以了,今天我就来教大家如何直接用CSS border相关属性画三角形,纯CSS代码绘制三角形,牛逼了吧
效果如下:

HTML代码如下
  1. <!doctype html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="utf-8"> 
  5.     <title>CSS Triangle Demo</title> 
  6.     <link rel="stylesheet" href="triangle.css"> 
  7.   </head> 
  8.  
  9.   <body> 
  10.     <h3>Down Triangle</h3> 
  11.     <div class="down-triangle"> 
  12.     </div> 
  13.  
  14.     <h3>Up Triangle</h3> 
  15.     <div class="up-triangle"> 
  16.     </div> 
  17.  
  18.     <h3>Left Triangle</h3> 
  19.     <div class="left-triangle"> 
  20.     </div>     
  21.  
  22.     <h3>Right Triangle</h3> 
  23.     <div class="right-triangle"> 
  24.     </div>         
  25.   </body> 
  26. </html> 

CSS代码如下:
 

  1. .down-triangle { 
  2.    width0
  3.    height0
  4.    border-width10px 10px 0 10px
  5.    border-stylesolid
  6.    border-color#dc291e transparent
  7.  
  8. .up-triangle { 
  9.    width0
  10.    height0
  11.    border-width0px 10px 10px 10px
  12.    border-stylesolid
  13.    border-color#dc291e transparent
  14.  
  15. .left-triangle { 
  16.    width0
  17.    height0
  18.    border-width10px 10px 10px 0px
  19.    border-stylesolid
  20.    border-colortransparent #dc291e
  21.  
  22. .right-triangle { 
  23.    width0
  24.    height0
  25.    border-width10px 0px 10px 10px
  26.    border-stylesolid
  27.    border-colortransparent #dc291e

 

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生