现在我们有一个需求,就是三角提示框 像这样:
注意这个三角导航,我们需要达到这样的效果。
第一种办法:
现在有两种方案,第一种需要用到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
<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这个三角图标实际上是一个图片,用的绝对布局···红红火火