js+CSS 实现选项卡

遇到万恶的手动实现选项卡= =！

js控制调用样式

<script type="text/javascript">
			function display(obj){
			
				if(obj=="1"){
					//document.getElementById("XX_id").style.display="none";//隐藏
					//document.getElementById("XXX_id").style.display="";//显示
					document.getElementById("divid1").className="trapezoid1";
					document.getElementById("spanid1").className="tx1";
					document.getElementById("divid2").className="trapezoid";
					document.getElementById("spanid2").className="tx";
				}
				
				if(obj=="2"){
					document.getElementById("XXX_id").style.display="none";//隐藏
					document.getElementById("XX_id").style.display="";//显示
					document.getElementById("divid1").className="trapezoid";
					document.getElementById("spanid1").className="tx";
					document.getElementById("divid2").className="trapezoid1";
					document.getElementById("spanid2").className="tx1";
				}
			}
		</script>

下面是CSS代码：

<style type="text/css">
		.trapezoid { 
			border-bottom: 30px solid #669; 
			border-right: 20px solid transparent;
			width:100px;
			hight:20px;
			display:inline;
			margin-top:-20px;
			z-index:1;
			}
		.trapezoid1 { 
			border-bottom: 30px solid white; 
			border-right: 20px solid transparent;
			width:100px;
			hight:20px;
			display:inline;
			margin-top:-23px;
			z-index:1;
			}
		.tx {
			border-left:90px;
			position:relative;
			width:100px;
			left:-190px;
			display:inline;
			z-index:2;
			cursor:hand;
		  }		
		.tx1 {
			border-left:90px;
			position:relative;
			width:100px;
			left:-190px;
			color:black;
			display:inline;
			z-index:2;
			cursor:hand;
		  }	
		</style>

上面用div实现的画不规则图形，这是