纯css三角形及其应用
时间：2023-03-31 13:20:17
CSS
前言气泡对话框或Popover与内容的连接部分会有一个小三角形效果。以前可能直接用图片实现，现在用纯css就可以实现。下面的效果分别是微信对话框和面包屑，大家回顾一下记录一下。效果如下：css写三角形的原理首先我们设置一个div元素的宽高和边框，观察效果。demo1{宽度：40px；高度：40px；边框宽度：20px；边框样式：实心；border-color:#ff0000#00ff00#0000ff#ff00ff;}效果可以发现四个边框是按照类似的等边梯形绘制的。如果把width和height进一步设置小，甚至设置为0，就会出现三角形，所以.demo2{width:0;高度：0；边框宽度：20px；边框样式：实心；border-color:#ff0000#00ff00#0000ff#ff00ff;}效果确实是这样的，接下来要做的就是提取其中一个三角形单独显示，其他显示为透明，所以就有了.demo3{width:0;高度：0；边框宽度：20px；边框样式：实心；边框颜色：透明；左边框颜色：#ff00ff；}效果一个指向右边的三角形就做好了，其他方向的三角形，只需要改变透明边框即可。应用有时候我们不需要整个实心三角形，只需要类似不同方向箭头的效果，比如popover气泡框的效果。这样就需要两个三角形重叠错位才能达到这样的效果。重叠三角形B的颜色与气泡框的背景颜色相同，重叠三角形A的颜色与气泡框的边框颜色相同。实现微信对话框效果，两个三角形重叠错位，也就是说需要两个元素，但是这样就增加了这个小功能的复杂度。其实可以使用label的伪元素:before和:after充当元素绘制两个元素。三角形。html部分嗨，你在吗？
csspart.chat-dialog{位置：相对；宽度：180px；高度：32px；行高：32px；边界半径：5px；左边距：30px；边框：1px实心#009a61；padding:4px;}.chat-dialog:before,.chat-dialog:after{content:"";显示：块；位置：绝对；顶部：13px；左：-13px；宽度：0；高度：0；:6px;边框颜色：透明；边框样式：实心；border-right-color:#009a61;}.chat-dialog:after{left:-12px;border-right-color:#fff;}效果实现面包屑效果和面包屑效果一样，只是在每块后面留一个空格，然后使用伪元素:before和:after定位箭头效果html部分
一级二级三级四级csspart.tag-tab{字体大小：16px；高度：24px；list-style:none;}.tag-tabli{float:left;位置：相对；padding-right:12px;}.tag-tab>li:before,.tag-tab>li:after{position:absolute;顶部：0；右：-12px；边框宽度：12px；边框颜色：透明；左边框颜色：#333；边框样式：实心；内容：””;z-index:1;}.tag-tab>li:after{right:-11px;border-left-color:#fff;}.tag-tab>li:hover{color:#009a61;}.tag-tab>li:hover:before{border-left-color:#009a61;}效果是，当然是通过旋转实现的css3方法，简单粗暴。如果以后有什么好的方法补充，欢迎提出。
