求助CSS高手，代码修改

proof

CSS代码，仿Chrome标签页(梯形标签页)，用于文件管理软件Tablacus Explorer。显示效果：

想做些改进，主要是区分各个“非当前页”、完善梯形形状、自定义各种背景颜色，如图：



最终理想样式：



CSS代码（待修改）

1. .tab, .tab2, .tab3,
   
2. .tab:hover, .tab2:hover, .tab3:hover {
   
3.   box-shadow: none;
   
4. }
   
5. 
   
6. .tab0 {
   
7.   padding: 3px 0 0 12px;
   
8.   background-color: ActiveCaption;
   
9. }
   
10. 
    
11. .tab, .tab2, .tab3 {
    
12.   position: relative;
    
13.   background: transparent;
    
14.   border: 0;
    
15.   padding: 0 12px;
    
16.   opacity: 1;
    
17. }
    
18. 
    
19. .activetab {
    
20.   position: relative;
    
21.   background-color: #fff;
    
22.   border: 0;
    
23.   padding: 0 2px;
    
24.   margin: 0 10px;
    
25.   height: 2em;
    
26. }
    
27. 
    
28. .activetab:before,
    
29. .activetab:after {
    
30.   content: "";
    
31.   position: absolute;
    
32.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
33.   bottom: 0;
    
34.   width: 25px;
    
35.   height: 24px;
    
36. }
    
37. .activetab:before {
    
38.   left: -24px;
    
39. }
    
40. .activetab:after {
    
41.   right: 1px;
    
42.   transform: scaleX(-1);
    
43.   transform-origin: right;
    
44. }
    
45. 
    
46. .tab:hover,
    
47. .tab2:hover,
    
48. .tab3:hover {
    
49.   position: relative;
    
50.   background-color: #d0e0e9;
    
51.   border: 0;
    
52.   padding: 0 2px;
    
53.   margin: 0 10px;
    
54. }
    
55. 
    
56. .tab:hover:before,
    
57. .tab:hover:after,
    
58. .tab2:hover:before,
    
59. .tab2:hover:after,
    
60. .tab3:hover:before,
    
61. .tab3:hover:after {
    
62.   content: "";
    
63.   position: absolute;
    
64.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23d0e0e9%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
65.   bottom: 0;
    
66.   width: 25px;
    
67.   height: 24px;
    
68. }
    
69. .tab:hover:before,
    
70. .tab2:hover:before,
    
71. .tab3:hover:before {
    
72.   left: -24px;
    
73. }
    
74. .tab:hover:after,
    
75. .tab2:hover:after,
    
76. .tab3:hover:after {
    
77.   right: 1px;
    
78.   transform: scaleX(-1);
    
79.   transform-origin: right;
    
80. }

复制代码

CSS代码源网页，有“仿Chrome标签页”和“仿FireFox标签页”两种代码，还有执行结果截图。
https://qiita.com/nocd5/items/af062f7b06d4cd3b8b18
https://tablacus.github.io/wiki/addons/usercss.html

a66

供参考：

1. /* 梯形标签页基础样式 */
   
2. .tab,
   
3. .tab2,
   
4. .tab3 {
   
5.   position: relative;
   
6.   display: inline-block;
   
7.   background-color: transparent;
   
8.   border: 0;
   
9.   padding: 0 12px;
   
10.   height: 2em;
    
11.   line-height: 2em;
    
12.   margin: 0 10px;
    
13.   color: #333;
    
14.   font-size: 13px;
    
15.   user-select: none;
    
16.   cursor: pointer;
    
17.   z-index: 1;
    
18. }
    
19. 
    
20. /* 左右梯形边框 */
    
21. .tab:before, .tab:after,
    
22. .tab2:before, .tab2:after,
    
23. .tab3:before, .tab3:after {
    
24.   content: "";
    
25.   position: absolute;
    
26.   bottom: 0;
    
27.   width: 25px;
    
28.   height: 24px;
    
29.   background-size: 25px 24px;
    
30. }
    
31. 
    
32. /* 左侧梯形 */
    
33. .tab:before,
    
34. .tab2:before,
    
35. .tab3:before {
    
36.   left: -24px;
    
37. }
    
38. 
    
39. /* 右侧梯形 */
    
40. .tab:after,
    
41. .tab2:after,
    
42. .tab3:after {
    
43.   right: -1px;
    
44.   transform: scaleX(-1);
    
45.   transform-origin: right;
    
46. }
    
47. 
    
48. /* 当前页样式 */
    
49. .activetab {
    
50.   background-color: #fff;
    
51.   z-index: 2;
    
52. }
    
53. 
    
54. .activetab:before,
    
55. .activetab:after {
    
56.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
57. }
    
58. 
    
59. /* 鼠标悬停样式 */
    
60. .tab:hover,
    
61. .tab2:hover,
    
62. .tab3:hover {
    
63.   background-color: #d0e0e9;
    
64.   z-index: 1;
    
65. }
    
66. 
    
67. .tab:hover:before, .tab:hover:after,
    
68. .tab2:hover:before, .tab2:hover:after,
    
69. .tab3:hover:before, .tab3:hover:after {
    
70.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23d0e0e9%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
71. }
    
72. 
    
73. /* 可选：支持不同背景颜色（通过类名） */
    
74. .tab.color1 {
    
75.   background-color: #f5f5f5;
    
76. }
    
77. .tab.color1:before, .tab.color1:after {
    
78.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23f5f5f5%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
79. }
    
80. 
    
81. .tab.color2 {
    
82.   background-color: #e0f7fa;
    
83. }
    
84. .tab.color2:before, .tab.color2:after {
    
85.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23e0f7fa%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
86. }
    
87. 
    
88. .tab.color3 {
    
89.   background-color: #fff8e1;
    
90. }
    
91. .tab.color3:before, .tab.color3:after {
    
92.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff8e1%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
    
93. }

复制代码

guong

来学习下

肉仔

来看看

luoade

虽然看不懂但是还是要学习

ashchen

进来学习一下。话说这个用AI可以轻轻松松吧

misakayaho

学习一下

cc2025

感谢分享

longjiasand

AI经常搞不定。帮顶