好久没有用css了，学习一下

观摩学一下

AI经常搞不定。帮顶

感谢分享

学习一下

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

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

来看看

来学习下

供参考：

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. }

复制代码