欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

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

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

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

从梯形入手:

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

三角形:

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

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

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

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

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

css实现箭头对话框

css实现气泡对话框

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

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

用纯CSS实现的箭头

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

上一篇:

下一篇: