【CSS基础】css三角提示框

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

 

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

第一种办法：

现在有两种方案，第一种需要用到css3的transform。我们直接上代码：

样式：

.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

<div class="second-triangle-wrapper"></div>

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

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

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

第二种办法：

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

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

    <div style="        border-top:50px solid yellow;        border-bottom: 50px solid red;        border-right: 50px solid green;        border-left: 50px solid blue;        width: 0;        height: 0;    ">

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

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

 

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

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

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