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

css3制作下三角鼠标悬浮变正三角

2017-07-04 11:47 281 查看
其实制作这种三角非常简单，只需要设置透明的边即可，鼠标悬浮的时候旋转。

以下是制作的详细代码：

html:

<div class="triangle">  </div>


css样式：

.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);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);

-webkit-transition: -webkit-transform 0.2s ease-in;
-moz-transition:-moz-transform 0.2s ease-in;
-o-transition:-o-transform 0.2s ease-in;
transition:transform 0.2s ease-in;
}


效果图：



快动手试一下吧！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 html 三角
相关文章推荐
新的分享
章节导航