css案例介绍之三角箭头

最新推荐文章于 2024-03-27 21:00:11 发布

无梦忆梦

最新推荐文章于 2024-03-27 21:00:11 发布

阅读量1.6k

点赞数

文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/qq_55199851/article/details/125574721

版权

这篇博客介绍了在前端开发中创建三角箭头的两种CSS技巧：利用伪元素边框属性和通过块元素旋转。这两种方法都能实现当鼠标悬停时在元素右侧显示三角箭头的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们浏览网页时候，会看到一些这样的边框

当鼠标放上时，会出现一个右边的三角箭头，这里提供两种实现方法。

第一种方式：通过伪元素边框属性与需要加箭头的元素叠加即可实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 案例实现边框右三角 */
        .kuai{
            width: 78px;
            line-height: 38px;
            position: relative;
            background-color: rgb(4, 174, 138);
            color: white;
            text-align: center;
            border-radius: 4px 4px 4px 4px;
            /* margin-left: 300px;
            margin-top: 120px; */
        }
        .kuai:hover:after{
            content: "";
            position: absolute;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid rgb(4, 174, 138);
            border-right: 10px solid transparent;
            right: -20px;
            top: 15px;
        }
    </style>
</head>
<body>
    <div class="kuai">
        中型SUV
    </div>
    <div class="kuai">
        中型SUV
    </div>
    <div class="kuai">
        中型SUV
    </div>
    <div class="jiao">

    </div>
</body>
</html>

第二种方式：通过块元素旋转与需要加箭头的元素叠加即可实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 这是第二种实现方式 */
        .kuai{
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
        }
        .kuai::before{
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: green;
            transform: rotate(45deg);
            right: -13px;
            top: 30px;
        }
        .jiao{
            width: 30px;
            height: 30px;
            background-color: skyblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="kuai">
    </div>
    <div class="jiao">

    </div>
</body>
</html>