kiinlam · April 25, 2014 02:29
diff --git a/css_triangle.html b/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>