效果图
代码
<!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">
#tri_box{
width: 400px;height: 100px;border: 1px solid silver;position: relative;margin: 5px auto;border-bottom: 2px solid orange;
}
#tri{
width: 0px;height: 0px;border: 6px solid white;left: 200px;bottom: -14px;margin: 0px;position: absolute;border-top-color: orange;
/*绝对定位，元素之间的位置不会互相影响，而相对定位恰好相反，所以视情况而用。*/
}
</style>
</head>
<body>
<div id="tri_box"><em id="tri"></em></div>
</body>
</html>
