一个属性搞定指向小箭头

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

Dariuslwk

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

阅读量304

点赞数 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>