【CSS】css三角提示框

「爱情、让人受尽委屈。」 2022-07-13 11:54 180阅读 0赞

现在我们有一个需求，就是三角提示框 像这样：

![Center][]

注意这个三角导航，我们需要达到这样的效果。

第一种办法：

现在有两种方案，第一种需要用到css3的transform。

这种方式我感觉最简单，用伪元素实现，但是记得要**给wrapper元素增加position 为relative 和 增加一个background-color。**

我们直接上代码：

.second-triangle-wrapper {
        border: 1px solid #ddd;
        width: 200px;
        height:70px;
        margin-top: 200px;
        position: relative;
        background: white;
    }
    .second-triangle-wrapper:before {
        content: '';
        border: inherit;
        padding: 0.5em;
        position: absolute;
        background: inherit;/**不加这个的话你会发现 这个伪元素不会将div的border－top给覆盖掉,bg-image默认是none,bg-color默认是transparent*/
        left: 31px;
        top: -9px;
        transform: rotate(45deg);
        border-right: 0;
        border-bottom: 0;
    }

html

现在已经有效果了 看下图：

![Center 1][]  
这个能应付特定的需求，但是你会发现这个伪元素实际上会遮住div里面的内容，看下图

![20170108192254385][]

第一个效果图因为我们在div里面用的是h标签，有默认的margin-top 所以 我们想文本内容紧贴div 这个办法是不可取的。

第二种办法：

这一种办法转载自一个前辈的博客：https://www.cnblogs.com/blosaa/p/3823695.html

他用的办法没有用到css3的transform 而是单纯的用控制border来实现，首先我们明确一点我们画一个三角形可以这样做：

![Center 2][]

当然这个div的display 不能是Inline,若是inline显示效果爆炸,不能画出三角形，这位前辈就是在这个基础上来做的三角导航。有个小贴士，这个也是来自于这个前辈的文章，就是比如我们只需要一个orientation 为上的三角形,最容易想到的办法就是 border-bottom 为红色,其他三个color设置为transparent，之前我就这样干过，看起来是对的。

![20170108203327184][]

但是， 实际上你会发现高度是100

![20170108203410669][]

但是你需要的是上面的空白不要占位，这时候把border-top设置为none就好了，最后就长这样：

![20170108203443890][]

扯远了 第二种办法的详情 可以参考附件完整html 或者直接访问前面博客地址

最后的最后： csdn这个三角图标实际上是一个图片，用的绝对布局···红红火火

[Center]: /images/20220713/97996ea72e904c34871e8cb8732fb38d.png
[Center 1]: /images/20220713/01ceccbaf86e4903b8276d2d57d04dc9.png
[20170108192254385]: /images/20220713/b908b0a9cb584eb7b5f1a3567b4e19c3.png
[Center 2]: /images/20220713/f760bd9fbfd84014812af0df5164d823.png
[20170108203327184]: /images/20220713/79a05b6b61204a5ea598e1592fc323fc.png
[20170108203410669]: /images/20220713/d7344f7e11754cc988e4c17828d0b293.png
[20170108203443890]: /images/20220713/f03a9855f6ac41feaeb7a8c9aed9ea93.png