首先，如何用CSS3来绘制三角形，下面介绍了四种朝向三角形的写法：
<div class="triangle"></div>
CSS样式设计：
.triangle {
width:0;
height:0;
overflow:hidden;
/*朝上的三角形*/
border-left:6px solid transparent;
border-right:6px solid transparent;
border-bottom:6px solid #118a11;
/*朝下的三角形*/
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #118a11;
/*朝左的三角形*/
border-right:6px solid #118a11;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
/*朝右的三角形*/
border-left:6px solid #118a11;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
}
需要什么朝向的三角形，就将其他朝向的三角形进行注释，就可以使用。
那如何使三角形实现180度的翻转呢：
.triangle:hover {
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
transform:rotate(180deg);
-webkit-transition: -webkit-transform 0.2s ease-in; /* Safari 和 Chrome */
-moz-transition:-moz-transform 0.2s ease-in; /* Firefox */
-o-transition:-o-transform 0.2s ease-in; /* Opera */
transition:transform 0.2s ease-in;
}
给.triangle添加一个hover伪类，利用transform实现180度的翻转，利用transition实现过渡的效果。
这里也添加了一些解决兼容性的方法，但对于IE6,7,8的问题暂且不提。
transition方法,ease-in规定是以“规定以慢速开始的过渡效果”，并且时间是0.2秒。
整体代码如下所示：（朝下的三角形翻转朝上）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.triangle {
width:0;
height:0;
overflow:hidden;
/*朝下的三角形*/
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #118a11;
}
.triangle:hover {
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
transform:rotate(180deg);
-webkit-transition: -webkit-transform 0.2s ease-in; /* Safari 和 Chrome */
-moz-transition:-moz-transform 0.2s ease-in; /* Firefox */
-o-transition:-o-transform 0.2s ease-in; /* Opera */
transition:transform 0.2s ease-in;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>