我目前正在尽可能准确地重新创建Google Chrome的标签栏。但事实证明比我想象的要复杂得多。
它已经看起来很相似,但我注意到几个问题:
>当标签调整大小时,角度变得混乱
> z-indexing不能按预期工作
>悬停事件不起作用
>哪里的标签重叠它看起来不好
>文本不是垂直居中的(在Firefox中它实际上是工作的)
>选项卡底部缺少曲线
> x按钮不贴在右边
有任何想法吗?
我试图查看chromes源代码,看看是否可以找到原始的颜色/透明度/曲线值,但是I couldn’t find anything。
在我忘记之前,如果可能的话,我希望这可能与IE8或多或少兼容,即使这意味着标签不能是梯形形状等。
EDIT2:从零开始重写整个事情。 (对于新的标签按钮,本·莱斯 – 刘易斯的信用)
https://jsfiddle.net/p7vxzLjq/17/
解决方法
这里是一个css形状的小提琴,就像你想要的新标签一样。
@H_404_23@#newtab {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #A8D5C1;
margin-left: 20px;
border-radius: 10px;
}
https://jsfiddle.net/2p74co0q/
对于透明度值,它很难从您的图像中看到,但我猜只是试错。显然,你的镀铬外观与我所使用的主题是如何不同的。