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

最新推荐文章于 2022-09-17 20:45:02 发布

had_meno

最新推荐文章于 2022-09-17 20:45:02 发布

阅读量5.4k

点赞数 1

本文链接：https://blog.csdn.net/had_meno/article/details/52880922

版权

首先，如何用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>

had_meno

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3绘制三角形，并实现翻转效果

首先，如何用CSS3来绘制三角形，下面介绍了四种朝向三角形的写法： CSS样式设计： .triangle { width:0; height:0; overflow:hidden; /*朝上的三角形*/ border-left:6px solid transparent; border-right:6px solid transparent; border
复制链接

扫一扫