[css]如何用纯css实现一个带有边框的三角形

ChenHsu
6,437 阅读2分钟

最近遇到了一个需求，实现一个element ui中 Tooltip 的需求，如下图：

image.png

但是对于我的实际需求来说，定制度特别高，在el ui的基础上修改了一下，貌似比自己实现方便不了多少，所以就着手自己实现一个吧。

需求分解

对需求进行分解，要实现一个消息提示框，可以把整个 Tooltip 分解为上下两个部分：

  • 上部的带指向三角形
  • 下部分文字框 然后利用定位将两者结合在一起就可以实现整个需求。

实现

整个 Tooltip 怎么实现不是本文的重点，本文的重点在于如何实现这样一个带有边框的三角形，即如下图：

image.png

实现三角形

众所周知，用css实现一个三角形，主要是利用 border 属性，所以，可以用如下代码实现一个箭头向上的等腰三角形：

<!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>
        .up-arrow {
            position: absolute;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid black;
        }
    </style>
</head>

<body>
    <div class="up-arrow"></div>
</body>

</html>

实现效果如下图所示：

image.png

实现边框效果

现在实现了一个三角形，那么如何实现一个黑框白底的三角形呢？或者说是一个箭头？
其实思路呢，也是利用三角形，不过是两个三角形叠加，就可以形成这样的效果：

image.png

即，我可以让一个白底的三角形叠加到一个黑底的三角形上，并且将白底的top值稍稍比黑底的大一点点，如下的代码：

<!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>
        .up-arrow {
            position: absolute;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid black;
        }

        .up-arrow-border {
            position: absolute;
            top: 12px;
            border-left: 8px solid  transparent;
            border-right: 8px solid  transparent;
            border-top: 8px solid  transparent;
            border-bottom: 8px solid white;
        }
    </style>
</head>

<body>
    <div class="up-arrow"></div>
    <div class="up-arrow-border"></div>
</body>

</html>

image.png

现在已经初步有了一个边框的效果，接下来是要让白底向右移动，黑和白同时居中

居中对齐

因为实现这样的效果通常是同时出现，所以可以用一个大的div将二者包裹再同时居中即可实现想要的效果，如下代码：

<!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>
        .up-arrow {
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid black;
        }

        .up-arrow-border {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translate(-50%,0);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid transparent;
            border-bottom: 8px solid white;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="up-arrow"></div>
        <div class="up-arrow-border"></div>
    </div>
</body>

</html>

image.png

嘿嘿，挺有意思！

avatar
文章
阅读
粉丝