CSS小技巧-用CSS写出一个三角形小图标

UI在设计网页的时候,有时为让页面更好看会喜欢在文章列表每个标题链接前面设计一个小图标,我们在重构页面时最经常的做法就在把那小图标弄成背景图片来实现UI设计的效果,其实如果那个小图标是三角形的,那我们还可以直接通过纯CSS定义, 无需背景图片就可以实现UI设计的效果。具体写法请看下面的演示代码,用CSS写出一个三角形小图标主要是靠 font 和 border 这个两个CSS标签。

CSS属性解释:

【font:0/0 "宋体"】这个字体和行高分别为0;相当于font:fontsize/line-height;

【border-color:red blue #000 green】  这四个颜色分别指的是顺时针上右下左

其实就是建一个没有内容只有边框的标签,三个边框颜色为背景色,一个为你需要的颜色。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>MJBlog</title> 
  6. <style type="text/css"> 
  7. em{ font-style: normal; } 
  8. *{margin:0;padding:0;font-size:12px;list-style:none;border:0;} 
  9. body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;} 
  10. a{ text-decoration:none;} 
  11. .top{ width:760px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;} 
  12. .logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;} 
  13. .logo a{ color:#666666;} 
  14. .denglu{ height:30px; line-height:30px; float:right; font-size:14px;} 
  15. .denglu a{ color:#666666; margin:0px 10px;} 
  16. .clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;} 
  17.  
  18. .box{ width:760px; border-top:1px solid #FFFFFF; height:auto; margin:0px auto;} 
  19.  
  20. /*用CSS写出一个三角形小图标,这个是用em标签*/ 
  21. .list_a{ width:200px; height:auto; margin:20px auto;} 
  22. .list_a li { height:25px} 
  23. .list_a em { display:block; font:0/0 "宋体"; border:4px solid; border-color:#f0f0f0 #f0f0f0 #f0f0f0 #921902; float:left; margin-top:2px} 
  24.  
  25. /*用CSS写出一个三角形小图标,这个是用div标签*/ 
  26. .list_b{ width:200px; height:auto; margin:20px auto; background-color:#FFFFFF; padding:10px;} 
  27.  
  28. .a {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff #fff #000; width:0px; height:0px; margin:10px auto;} 
  29. .b {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff blue #fff; width:0px; height:0px; margin:10px auto;} 
  30. .c {font:0/0 "宋体"; border:25px solid; border-color:#fff green #fff #fff; width:0px; height:0px; margin:10px auto;} 
  31. .d {font:0/0 "宋体"; border:25px solid; border-color:red blue #000 green; width:0px; height:0px; margin:10px auto;} 
  32. </style> 
  33. </head> 
  34.  
  35. <body> 
  36. <div class="top"> 
  37. <div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div> 
  38. <div class="denglu"><a href="#">登录</a><a href="#">注册</a></div> 
  39. <div class="clear"></div> 
  40. </div> 
  41.  
  42. <div class="box"> 
  43. <div class="list_a"> 
  44. <ul> 
  45.    <li><em></em>这是一个带三角的新闻列表</li> 
  46.    <li><em></em>这是一个带三角的新闻列表</li> 
  47.    <li><em></em>这是一个带三角的新闻列表</li> 
  48.    <li><em></em>这是一个带三角的新闻列表</li> 
  49.    <li><em></em>这是一个带三角的新闻列表</li> 
  50. </ul> 
  51. </div> 
  52.  
  53. <div class="list_b"> 
  54.  
  55. <div class="a"></div> 
  56. <div class="b"></div> 
  57. <div class="c"></div> 
  58. <div class="d"></div> 
  59.  
  60. </div> 
  61. </div> 
  62. </body> 
  63. </html> 

转载请注明:代码家园 » CSS小技巧-用CSS写出一个三角形小图标

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)