css书写三角符号

最新推荐文章于 2023-09-12 08:36:26 发布

我是坏人我霸道

最新推荐文章于 2023-09-12 08:36:26 发布

阅读量376

点赞数

分类专栏： h5c3练习文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_44369304/article/details/120233970

版权

h5c3练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

我是坏人我霸道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css书写三角符号

用css3的旋转书写三角符号<style> /* 给div加样式 */ div{ width: 249px; height: 25px; border: 1px solid black; position: relative; } /* 用伪元素选择器的方法添加三角符号 */ div::after{
复制链接

扫一扫