css实现带箭头选项卡_html/css
2020-11-27
来源：独旅网
这种纯css没有兼容性的问题，无需切图，甚至没有用到CSS3，对各种浏览器支持良好。
基本原理：控制盒子模型的宽度高度和边框的显示隐藏，以及改变某一条边的颜色。
从梯形入手：
当元素宽、高和边框的宽相等时，改变某一边的颜色可以看到一个梯形；
三角形：
当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。
向上的三角形： 向下的三角形： 向左的三角形： 向右的三角形：
通过不同颜色的两个元素覆盖可以形成三角线。
向上的三角线： 向下的三角线： 向左的三角线： 向右的三角线：
那么带箭头的提示框就简单了，只需要外层加个边框，用相对和绝对定位就可以实现。
css实现箭头对话框
css实现气泡对话框
要实现我需求再结合js就行啦。
在这里，我把学习过程中参考的文章标注一下供大家学习：
用纯CSS实现的箭头
纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层
显示全文