当前位置:Gxlcms > html代码 > css实现带箭头选项卡_html/css_WEB-ITnose

css实现带箭头选项卡_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:6人阅读

这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换。起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位。这种方法是可行的,但是因为手机和电脑的屏幕显示图片的画质细节不同,导致1px的边框比1px的切图实际粗很多,对于有强迫症的人来说心里总是不舒服的……后来我就想,屁大点的箭头直接用css写一个算了。可是以前没写过,那就研究一下吧。网上有很多这方面的资料,但是还是那句话,那都是人家的不是自己的,要想据为己有自己也写篇博客吧。

这种纯css没有兼容性的问题,无需切图,甚至没有用到CSS3,对各种浏览器支持良好。

基本原理:控制盒子模型的宽度高度和边框的显示隐藏,以及改变某一条边的颜色。

从梯形入手:

当元素宽、高和边框的宽相等时,改变某一边的颜色可以看到一个梯形;

三角形:

当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形。

向上的三角形: 向下的三角形:  向左的三角形:   向右的三角形:

通过不同颜色的两个元素覆盖可以形成三角线。

        向上的三角线:                                向下的三角线:                                向左的三角线:                                向右的三角线:                    

那么带箭头的提示框就简单了,只需要外层加个边框,用相对和绝对定位就可以实现。

css实现箭头对话框

css实现气泡对话框

要实现我需求再结合js就行啦。

在这里,我把学习过程中参考的文章标注一下供大家学习:

用纯CSS实现的箭头

纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层

人气教程排行