<!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" />
<link rel="shortcut icon" href="切切切.png" />
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px}
#q1{0px; height:0px;
border-top:100px solid #30F;
border-bottom:100px solid transparent;
border-right:100px solid transparent;
border-left:100px solid transparent;
margin-top:50px;
}
#q2{100px; height:100px;
border-top:0px solid transparent;
border-right:0px solid transparent;
border-bottom:10px solid #60C;
border-left:10px solid #60C;
transform:rotate(45deg);
}
#content{
margin:20px 0px 0px 300px; 350px; height:100px; border:2px solid #60F;
overflow:hidden; padding:10px 10px 10px 10px;}
#waiceng{ 100px; height:50px; margin-left:320px; overflow:hidden; margin-top:-2px;}
#sanjiao{ 50px; height:50px; border:2px solid #60F; transform:rotate(45deg); position:relative; top:-27px; border-left:0px; border-top:0px; background-color:#FFF;}
#q3{ 600px; height:50px; border:1px solid #e9e9e9}
.q4{ 100px; height:40px; float:left; text-align:center; vertical-align:middle;
line-height:40px; font-family:微软雅黑; color:#333;
}
.q4:hover{ color:#FFF; border-top:5px solid #F39; background-color:#b3b6bb}
#q5{ position:fixed; top:0px; 100%; height:100px; border:1px soild #000; background-color:#6FC; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="q1"></div>
<div id="q2"></div>
<div id="content">
CSS3中添加的transform是对元素进行变化操作的，包括位移，旋转，放大，变形等操作。这里我的代码均是采用标准的css3规范书写，大家使用的时候为了兼容可加上-wedkit-、-o-、-ms-、-mos-、-khtml-等前缀以适应縣浏览器。
</div>
<div id="waiceng">
<div id="sanjiao"></div>
</div>
<div id="q3">
<div class="q4">春节</div>
<div class="q4">元宵节</div>
<div class="q4">端午节</div>
<div class="q4">中秋节</div>
<div class="q4">国庆节</div>
</div>
<div id="q5"></div>
</body>
</html>