用css3书写三角形

LCYTDS

于 2021-11-19 08:52:05 发布

阅读量306

点赞数 1

CC 4.0 BY-SA版权

文章标签： html5 css3 前端

本文链接：https://blog.youkuaiyun.com/liuyuDS/article/details/121414415

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