css实现带箭头选项卡_html/css_WEB-ITnose
程序员文章站
2023-12-27 11:32:21
...
这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换。起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位。这种方法是可行的,但是因为手机和电脑的屏幕显示图片的画质细节不同,导致1px的边框比1px的切图实际粗很多,对于有强迫症的人来说心里总是不舒服的……后来我就想,屁大点的箭头直接用css写一个算了。可是以前没写过,那就研究一下吧。网上有很多这方面的资料,但是还是那句话,那都是人家的不是自己的,要想据为己有自己也写篇博客吧。
这种纯css没有兼容性的问题,无需切图,甚至没有用到CSS3,对各种浏览器支持良好。
基本原理:控制盒子模型的宽度高度和边框的显示隐藏,以及改变某一条边的颜色。
从梯形入手:
当元素宽、高和边框的宽相等时,改变某一边的颜色可以看到一个梯形;
三角形:
当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形。
向上的三角形: 向下的三角形: 向左的三角形: 向右的三角形:
通过不同颜色的两个元素覆盖可以形成三角线。
向上的三角线: 向下的三角线: 向左的三角线: 向右的三角线:
那么带箭头的提示框就简单了,只需要外层加个边框,用相对和绝对定位就可以实现。
css实现箭头对话框
css实现气泡对话框
要实现我需求再结合js就行啦。
在这里,我把学习过程中参考的文章标注一下供大家学习:
用纯CSS实现的箭头
纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层
推荐阅读
-
css实现带箭头选项卡_html/css_WEB-ITnose
-
实现一个三列布局(左右侧固定,中间自适应宽度)_html/css_WEB-ITnose
-
密码修改不能实现,大神们快来看看_html/css_WEB-ITnose
-
【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_html/css_WEB-ITnose
-
在HTML中如何实现链接选择?详见内容_html/css_WEB-ITnose
-
CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose
-
求解答web中用easyui如何实现柱形图_html/css_WEB-ITnose
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
使用 CSS3 伪元素实现立体的照片堆叠效_html/css_WEB-ITnose
-
CSS+JQ实现炫酷导航栏_html/css_WEB-ITnose