一个属性搞定指向小箭头

最新推荐文章于 2023-02-24 18:40:12 发布

Dariuslwk

最新推荐文章于 2023-02-24 18:40:12 发布

阅读量302

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44158936/article/details/105339422

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

transform: rotate(α) 的应用

1、实现思路

创建一个正方形的块元素 arrow
添加左侧边框、上侧边框，设置为1px solid red ;
将 arrow 顺时针旋转 45°
根据定位，将元素放在另一个元素之上

2、代码实现

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小箭头设计</title>
        <style type="text/css">
            .arrow {
                width: 10px;
                height: 10px;
                border-left: 1px solid red;
                border-top: 1px solid red;
                transform: rotate(45deg);  /* 图形顺时针旋转45° */
            }
        </style>
    </head>
    <body>

        <div class="arrow"></div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opN0WvN4-1586140223176)(D:\DAYNOTE\arrow.PNG)]$

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dariuslwk

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个属性搞定指向小箭头

transform: rotate(α) 的应用1、实现思路创建一个正方形的块元素 arrow添加左侧边框、上侧边框，设置为1px solid red ;将 arrow 顺时针旋转 45°根据定位，将元素放在另一个元素之上2、代码实现<!DOCTYPE html><html lang="en"> <head> ...
复制链接

扫一扫