CSS入门到实战之三角箭头的实现

最新推荐文章于 2024-07-31 16:40:00 发布

像风一羊的女孩

最新推荐文章于 2024-07-31 16:40:00 发布

阅读量428

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45921611/article/details/120444394

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在生活中经常会遇到如下图所示一个大框旁边有一个三角箭头

那么它是如何实现的呐

首先，我们先来讨论三角箭头的实现

平常通过边框来实现的三角是无法设置边框的，毕竟三角本身就是边框来实现的，所以换一种思考方式来想，通过定位来完成

是的，方法就是白色的三角压盖灰色三角，使用定位是非常简单的。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .arrow {
            position: relative;
            width: 30px;
            height: 30px;
            border:1px solid #000;
            margin-left: 100px;
            margin-top: 100px;
        }
        /* 箭头的类 */
        /* 灰色三角形 */
        .arrow-right::before{
            content: '';
            position: absolute;
            left: 10px;
            top: 8px;
            width: 0;
            height: 0;
            border-width:10px 0px 10px 10px;
            border-style: solid;
            border-color: transparent transparent transparent #999;

        }
        /* 白色三角形 */
        .arrow-right::after {
            content: '';
            position: absolute;
            left: 9px;
            top: 8px;
            width: 0;
            height: 0;
            border-width:10px 0px 10px 10px;
            border-style: solid;
            border-color: transparent transparent transparent #fff;

        }
    </style>
</head>
<body>
    <div class="arrow arrow-right">
         <!-- 灰色 三角形::before-->
         <!-- 白色 三角形::after-->
    </div>
</body>
</html>

运行结果：