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

最新推荐文章于 2023-03-29 02:43:41 发布

暖夏随园

最新推荐文章于 2023-03-29 02:43:41 发布

阅读量857

点赞数

分类专栏： css 文章标签： css3 html 三角

本文链接：https://blog.csdn.net/nuanxiasuiyuan/article/details/74305399

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

其实制作这种三角非常简单，只需要设置透明的边即可，鼠标悬浮的时候旋转。
以下是制作的详细代码：

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;  
    }