CSS制作列表三角形图标
以前做三角形图标,都是做一个三角的图片,然后在css里面调用,后来发现有另一种特殊的做法.用em标签方法来实现（其他标签也一样可以实现）.em在html里面是一个强调语气,和strong标签类似,传统上浏览器会以斜体来显示em，以粗体来显示strong。
现在要以特殊的em手法来实现三角形图标的做法,以下图为例:
<!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=gb2312" />
<title>三角形图标的特殊做法</title>
<style type="text/css">
<!--
* { font-size:12px}
ul li { list-style:none; margin:0; padding:0}
li { height:25px}
em { display:block; font:0/0 "宋体"; border:4px solid; border-color:#fff #fff #fff #921902; float:left; margin-top:2px}
-->
</style>
</head>
<body>
<ul>
<li><em></em>这是一个带三角的新闻列表</li>
<li><em></em>这是一个带三角的新闻列表</li>
<li><em></em>这是一个带三角的新闻列表</li>
<li><em></em>这是一个带三角的新闻列表</li>
<li><em></em>这是一个带三角的新闻列表</li>
</ul>
</body>
</html>
解释:
css中
em { display:block; font:0/0 "宋体"; border:4px solid; border-color:#fff #fff #fff #921902; float:left; margin-top:2px}
font:0/0 是分别定义字体大小为0和行高为0。font:fontsize/line-height
border:4px solid 可以分别改成5px和6px来改变三角图标的大小,border-color:#fff #fff #fff #921902 改变颜色顺序来改变三角图标的方向(为顺时针方向),可以自己试一试.
可能很多人和我当初一样,还是不大了解.现在在用一个示例来解释一下：
代码：
<!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=gb2312" />
<title>三角形图标的特殊做法</title>
<style type="text/css">
<!--
* { font-size:12px}
.a {font:0/0 "宋体"; border:25px solid; border-color:red blue #000 green; float:left; margin:0 15px}
.b {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff #000 #fff; float:left; margin:0 15px}
.c {font:0/0 "宋体"; border:25px solid; border-color:#fff blue #fff #fff; float:left; margin:0 15px}
.d {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff #fff green; float:left; margin:0 15px}
-->
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</body>
</html>
- 本文标题： CSS制作列表三角形图标
- 文章分类：【HTML/CSS】
- 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.