kiinlam/css_triangle.html

## css_triangle.html
<!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{padding:50px;}
.san1{position:relative; _height:0px; _line-height:0px;} /* IE6要使用 _height:0px; _line-height:0px; 修正 */
   .emborder1{
     display:block;
     border-top:9px solid #fff;
     border-bottom:9px solid #fff;
     border-left:0px;
     border-right:9px solid #1c7ecf;
     position:absolute; left:0; top:0;
     }
     .emborder2{
     display:block;
     border-top:6px solid #1c7ecf;
     border-bottom:6px solid #1c7ecf;
     border-left:0px;
     border-right:6px solid #fff;
     position:absolute;
     left:6px;
     top:-6px;
     }

.cusp01,.cusp02 {
   position:absolute;
   display:block;
   height:0px; line-height:0px;
}
#left_cusp {
padding:10px;
   border:3px solid #1c7ecf;
   position:relative;
   margin:10px;
   float:left;
   width:150px;
   height:100px;
}
#left_cusp .cusp01 {
   left:-12px;
   top:50px;
   border-top:9px solid #fff;
   border-bottom:9px solid #fff;
   border-left:0px;
   border-right:9px solid #1c7ecf;
}
#left_cusp .cusp02 {
   left:6px;
   top:-6px;
   border-top:6px solid #1c7ecf;
   border-bottom:6px solid #1c7ecf;
   border-left:0px;
   border-right:6px solid #fff;
}
ul, li {
   padding:0px;
   list-style:none;
   margin:0;
}

/* 三角的父元素必须要是relative, 这样三角元素定义了absolute, 才能显示, 很奇怪.  */
</style>
</head>

<body>
<h3>三角形的样子</h3>
<div class="san1">
   <span class="emborder1"></span>
</div>
<br/><br/><br/>
<h3>两个三角形叠加的效果</h3>
<div class="san1">
   <span class="emborder1"><span class="emborder2"></span></span>
</div>
<br/><br/><br/>
<h3>实际应用举例</h3>
<div id="left_cusp">
   <ul>
       <li>这种三角形</li>
       <li>在某些实际应用中</li>
       <li>还是有一定价值的</li>
       <li>不错不错</li>
   </ul>
   <span class="cusp01"><span class="cusp02"></span></span>
</div>

</body>
</html>
	<!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{padding:50px;}
	.san1{position:relative; _height:0px; _line-height:0px;} /* IE6要使用 _height:0px; _line-height:0px; 修正 */
	.emborder1{
	display:block;
	border-top:9px solid #fff;
	border-bottom:9px solid #fff;
	border-left:0px;
	border-right:9px solid #1c7ecf;
	position:absolute; left:0; top:0;
	}
	.emborder2{
	display:block;
	border-top:6px solid #1c7ecf;
	border-bottom:6px solid #1c7ecf;
	border-left:0px;
	border-right:6px solid #fff;
	position:absolute;
	left:6px;
	top:-6px;
	}

	.cusp01,.cusp02 {
	position:absolute;
	display:block;
	height:0px; line-height:0px;
	}
	#left_cusp {
	padding:10px;
	border:3px solid #1c7ecf;
	position:relative;
	margin:10px;
	float:left;
	width:150px;
	height:100px;
	}
	#left_cusp .cusp01 {
	left:-12px;
	top:50px;
	border-top:9px solid #fff;
	border-bottom:9px solid #fff;
	border-left:0px;
	border-right:9px solid #1c7ecf;
	}
	#left_cusp .cusp02 {
	left:6px;
	top:-6px;
	border-top:6px solid #1c7ecf;
	border-bottom:6px solid #1c7ecf;
	border-left:0px;
	border-right:6px solid #fff;
	}
	ul, li {
	padding:0px;
	list-style:none;
	margin:0;
	}

	/* 三角的父元素必须要是relative, 这样三角元素定义了absolute, 才能显示, 很奇怪. */
	</style>
	</head>

	<body>
	<h3>三角形的样子</h3>
	<div class="san1">
	<span class="emborder1"></span>
	</div>
	<br/><br/><br/>
	<h3>两个三角形叠加的效果</h3>
	<div class="san1">
	<span class="emborder1"><span class="emborder2"></span></span>
	</div>
	<br/><br/><br/>
	<h3>实际应用举例</h3>
	<div id="left_cusp">
	<ul>
	<li>这种三角形</li>
	<li>在某些实际应用中</li>
	<li>还是有一定价值的</li>
	<li>不错不错</li>
	</ul>
	<span class="cusp01"><span class="cusp02"></span></span>
	</div>

	</body>
	</html>