在网页中生成三角形箭头

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

weixin_53844810

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

阅读量447

点赞数

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

本文链接：https://blog.csdn.net/weixin_53844810/article/details/120845111

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

例如：在小米官网中，我们需要设置一个向上的小三角。

我们可以通过设置border的方法来设置。

原理：通过盒子的边框连接的梯形斜线来实现

这是一个宽度为100px,高度为100px的盒子的边框

当我们把高度和宽度都改为0时。效果图如右图所示

这时，我们把上边框去掉。效果图如右图所示

可以看出此时，已经有了三角的雏形，接下来只要把上右左的边框颜色改为透明即可得到一个向上的三角形。

以下为生成向上，向下，向右，向左四个方向的三角箭头的方法。

<!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>
        body {
            background-color: #bfa;
        }

        /* 设置向上的三角箭头 */
        .box1 {
            width: 0;
            height: 0;
            /* 通过改变border的宽度来设置三角形箭头的大小 */
            border: 30px transparent solid;
            border-top: none;
            /* 通过border-bottom-color改变下边框的颜色来选择所需的颜色*/
            border-bottom-color: white;
        }

        /* 设置向下的三角箭头 */
        .box2 {
            width: 0;
            height: 0;
            border: 30px transparent solid;
            border-bottom: none;
            /* 通过border-top-color改变上边框的颜色来选择所需的颜色*/
            border-top-color: white;
        }

        /* 设置向右的三角箭头 */
        .box3 {
            width: 0;
            height: 0;
            border: 30px transparent solid;
            border-right: none;
            /* 通过border-left-color改变左边框的颜色来选择所需的颜色*/
            border-left-color: white;
        }

        /* 设置向左的三角箭头 */
        .box4 {
            width: 0;
            height: 0;
            border: 30px transparent solid;
            border-left: none;
            /* 通过border-right-color改变右边框的颜色来选择所需的颜色*/
            border-right-color: white;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <div class="box2"></div>
    <br>
    <div class="box3"></div>
    <br>
    <div class="box4"></div>
</body>
</html>