当前位置: 代码迷 >> Web前端 >> 利用border-width兑现等腰直角三角形,兼容IE6+、FF、chrome
  详细解决方案

利用border-width兑现等腰直角三角形,兼容IE6+、FF、chrome

热度:232   发布时间:2012-08-27 21:21:56.0
利用border-width实现等腰直角三角形,兼容IE6+、FF、chrome
<!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>利用border-width实现等腰直角三角形</title>
<style>
	body{margin:0;background:#FFF}
	.d_a{width:100px;height:17px;margin:0 auto;border:1px solid #CCC;position:relative}
	.s_a{border-width:5px;border-style:solid;border-color:#000 #FFF #FFF #FFF;width:0;height:0;position:absolute;top:6px;right:3px;cursor:pointer;_overflow:hidden;}
</style>
</head>

<body>
	<div class="d_a">
    	<span class="s_a"></span>
    </div>
</body>
</html>

?

修改border-color可实现4个方向的三角。

  相关解决方案