您的位置：首页 > Web前端 > CSS

CSS3绘制三角形，并实现翻转效果

2016-10-21 10:46 603 查看
首先，如何用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航