用css3书写三角形

最新推荐文章于 2025-11-25 14:29:34 发布

原创最新推荐文章于 2025-11-25 14:29:34 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #前端

本文介绍了一种使用纯CSS实现的三角形图标及其动态旋转效果的方法。该方法通过伪元素结合CSS3的transform属性来创建一个简单的下拉箭头，并在鼠标悬停时使其旋转，适用于导航菜单等交互设计中。

 <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: '';
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
            border-radius: 3px;
        }
        /* 鼠标经过div则三角旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>