以前做三角形圖標,都是做一個三角的圖片,然後在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>
顯示：
