css製作三角形,多種寫法

來源:互聯網
上載者:User

<!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>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.