css制作三角形,多种写法

<!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>无标题文档</title>
<style type="text/css">
body{background:#999;}
em{font-style:normal;font-weight:normal;}
.triangleArr{display:inline-block;width:7px;height:4px;*height:6px;_height:5px;margin:0 0 0 5px;overflow:hidden;vertical-align:middle;font-size:12px;line-height:12px;line-height:12pxurl(0);}
.triangleArr em{display:inline-block;font-family:"SimSun";margin:-7px 0 0 -2px;_margin:-21px 0 0 -2px;cursor:pointer;}
.arrow{width:0;height:0;font-size:0;border-width:20px;border-color:#990000 transparent transparent;zoom:1;}
.down{border-style:solid dashed dashed;}
.up{border-style:dashed dashed solid;}
</style>
</head>

<body>
<span class="triangleArr"><em>◆</em></span>
<br />
<span class="arrow up"></span>
<br />
<span class="arrow down"></span>
</body>
</html>

你可能感兴趣的:(css制作三角形,多种写法)