css案例_下拉三角翻转

isHuPei

已于 2023-03-24 14:24:16 修改

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： css css3 html

于 2022-06-24 18:22:49 首次发布

本文链接：https://blog.csdn.net/hu4545/article/details/125450459

版权

前端专栏收录该内容

8 篇文章 2 订阅

订阅专栏

css案例_下拉三角翻转

css案例_下拉三角翻转常见于下拉导航、表单下拉多选等场景。代码已测试，完美运行。
在这里插入图片描述

原理：三角可以看成是一个只具有右边框和底部边框的方形盒子通过 transform: rotate(45deg); 顺时针翻转45度得来的。当触摸时通过 transform: rotate(225deg); 旋转225度（原本的45度再向上翻转180度）得来。

html部分：

<body>
    <!-- 这里的div元素指的是上面带边框的长方形 -->
    <div></div>
</body>

css部分：

div {
	/* 本盒子用来模拟需要添加三角的表单、下拉链接 */
    position: relative;
    width: 235px;
    height: 35px;
    border: 1px solid black;
}

/* after伪元素 */
div::after {
    position: absolute;
    top: 12px;
    right: 12px;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    /* 添加过渡 */
    transition: all .4s;
}

div:hover::after {
    transform: rotate(225deg);
}