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

作者:MJ 发布于:2012-9-20 9:48 Thursday 分类:Css

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

CSS属性解释:

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

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

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

 

发表评论:

Powered by 588cy.com