用css3的旋转书写三角符号
<style> /* 给div加样式 */ div{
width: 249px; height: 25px; border: 1px solid black; position: relative; } /* 用伪元素选择器的方法添加三角符号 */ div::after{
content: ''; /* 设置绝对位置，记得也要给父元素设置位置 */ position: absolute; top: 8px; right: 6px; width: 8px; height: 8px; border-bottom: 1px solid black; border-right: 1px solid black; /* 设置旋转角度 */ transform: rotate(45deg); /* 设置过渡动画 */ transition: all 0.3s; } /* 设置鼠标悬停旋转 */ div:hover::after{
/* 180deg加上原本旋转的45deg */ transform: rotate(225deg); }
style>
head> <body> <div>
div>
body> 用到的知识点：
- css 的 tranform 和 transition 属性的使用
- 用伪元素选择器创建伪元素
注意：
- 伪元素选择器创建的伪元素是行内元素，要给其设置宽高的话要把它转换成行内块元素或者块级元素。
- 该代码中，因为给创建的伪元素设置了position属性，而这个属性会将使用的元素转换成块级框，因此不需要再额外设置display: inline-block。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229879.html原文链接：https://javaforall.net
