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

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】这四个颜色分别指的是顺时针上右下左

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
em{ font-style: normal; }
*{margin:0;padding:0;font-size:12px;list-style:none;border:0;}
body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
.top{ width:760px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}
.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}
.logo a{ color:#666666;}
.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}
.denglu a{ color:#666666; margin:0px 10px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}

.box{ width:760px; border-top:1px solid #FFFFFF; height:auto; margin:0px auto;}

/*用CSS写出一个三角形小图标，这个是用em标签*/
.list_a{ width:200px; height:auto; margin:20px auto;}
.list_a li { height:25px}
.list_a em { display:block; font:0/0 "宋体"; border:4px solid; border-color:#f0f0f0 #f0f0f0 #f0f0f0 #921902; float:left; margin-top:2px}

/*用CSS写出一个三角形小图标，这个是用div标签*/
.list_b{ width:200px; height:auto; margin:20px auto; background-color:#FFFFFF; padding:10px;}

.a {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff #fff #000; width:0px; height:0px; margin:10px auto;}
.b {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff blue #fff; width:0px; height:0px; margin:10px auto;}
.c {font:0/0 "宋体"; border:25px solid; border-color:#fff green #fff #fff; width:0px; height:0px; margin:10px auto;}
.d {font:0/0 "宋体"; border:25px solid; border-color:red blue #000 green; width:0px; height:0px; margin:10px auto;}
</style>
</head>

<body>
<div class="top">
<div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div>
<div class="denglu"><a href="#">登录</a><a href="#">注册</a></div>
<div class="clear"></div>
</div>

<div class="box">
<div class="list_a">
<ul>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
</ul>
</div>

<div class="list_b">

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

</div>
</div>
</body>
</html>

« 服装商城网站商品展示JS特效服装搭配展示JS特效 | JQuery + CSS 做出来的仿select下拉框美化特效JS代码！»

发表评论：

blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接

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

blogger

分类

最新碎语

搜索

随机日志

链接

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