Chrome中的样式标签栏？

I'm trying to recreate Google Chrome's tab bar as accurately as possible with HTML/CSS. But it turns out to be quite a bit more complicated than I thought.

我正在尝试使用HTML / CSS尽可能准确地重新创建Google Chrome的标签栏。但结果却比我想象的要复杂得多。

It already looks pretty similar, but I noticed several issues:

它看起来非常相似，但我注意到几个问题：

• when the tabs are resized the angles get messed up
• 当调整选项卡大小时，角度会变得混乱
• the z-indexing doesn't work as expected
• z-indexing无法按预期工作
• the hover events don't work
• 悬停事件不起作用
• where tabs overlap it looks bad
• 标签重叠的地方看起来很糟糕
• text is not vertically centered (in Firefox it works actually)
• 文本不是垂直居中的（在Firefox中实际上是有效的）
• the tabs are lacking curves on the bottom
• 标签底部缺少曲线
• the x buttons don't stick to the right
• x按钮不会粘在右边

Any ideas?

有任何想法吗？

I tried to look at chromes source code to see if I could find the original color/transparency/curve values, but I couldn't find anything.

我试着查看chromes源代码，看看我是否能找到原始颜色/透明度/曲线值，但我找不到任何东西。

Before I forget, if possible in any way, I'd like this to be more or less compatible with IE8, even if that means that the tabs can't be trapezoid shaped etc.

在我忘记之前，如果可能的话，我希望这与IE8或多或少兼容，即使这意味着标签不能是梯形等。

EDIT2: Rewrote the whole thing from scratch. (Credits to Ben Rhys-Lewis for the new-tab-button)
https://jsfiddle.net/p7vxzLjq/17/

编辑2：从头开始重写整个事情。 （Ben-Rhys-Lewis的新标签按钮）https://jsfiddle.net/p7vxzLjq/17/

body {
  background: #21C256; /* green windows theme */
  /* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
  height: 23px; /* tab height */
  cursor: default;
  user-select: none; /* disable text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none; /* disable image drag */
  margin: 0;
  padding: 0px 7px 0px 7px;
}
.tab {
  background: #FFFFFF; /* inactive tab background color */
  opacity: 0.726; /* inactive tab transparency */
  width: 213px; /* tab width */
  //max-width: 213px; /* messes up the trapezoid angles */
  margin-left: 0px; /* tab overlap */
  float: left;
  overflow: hidden;
  height: 100%;
  /*padding-bottom: 1px;*/
  
  border-radius: 3px; /* tab curves */
  transform: perspective(100px) rotateX(20deg); /* tab shape angle */
  box-shadow: 0 0 2pt 0 rgba(0, 0, 0, 0.9); /* tab outline */
  
  white-space: nowrap;
  padding-left: 8px; /* icon left side margin */
  display: block;
  vertical-align: middle;
  z-index: -2;  /* inactive tabs are generally in the background */
}
.tab:hover {
  opacity: 0.8;
}
.tab-content {
  transform: perspective(100px) rotateX(-20deg); /* untransform tab content (this makes stuff blurry! :( ) */
  -o-transform: perspective(100px) rotateX(-20deg);
  -ms-transform: perspective(100px) rotateX(-20deg);
  -moz-transform: perspective(100px) rotateX(-20deg);
  -webkit-transform: perspective(100px) rotateX(-20deg);
  -khtml-transform: perspective(100px) rotateX(-20deg);
}
.tab-icon {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}
.tab-text {
  display: inline-block;
  vertical-align: middle;
  font-family: arial, sans-serif; /* tab text font */
  text-rendering: geometricPrecision; /* tab text improve rendering */
  font-size: 12px; /* tab text size */
  -webkit-mask-image: linear-gradient(to right, #000, #000, 200px, transparent); /* make text fade at the right edge (webkit only)*/
}
.tab-close {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  right: 5px;
  background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.tab-close:hover {
  background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.active-tab {
  z-index: -1; /* active tab is in front of other tabs, but still behind the content box */
  background: linear-gradient(to bottom, #FFFFFF, #F8F9F9); /* active tab color */
  position: relative;
  opacity: 1;
  padding-bottom: 2px;
}
.active-tab:hover {
  opacity: 1;
}

.new-tab {
  overflow: hidden;
  float: left;
  width: 25px; /* new-tab-button width */
  height: 14px; /* new-tab-button height */
  margin-top: 5px; /* to vertically center the new-tab-button */
  margin-left: 7px; /* margin between tabs and new-tab-button */
  box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9); /* new-tab-button outline */
  background: #FFFFFF; /* new-tab-button color */
  opacity: 0.626; /* new-tab-button transparency */
  border-radius: 2px; /* new-tab-button curves */
  transform: skew(20deg); /* new-tab-button shape angle */
  -o-transform: skew(20deg);
  -ms-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -khtml-transform: skew(20deg);
  -webkit-transform: skew(20deg); 
}
.new-tab:hover {
  opacity: 0.8;
}

#content {
  z-index: 1; /* the content box is always in the foreground */
  width: 100%;
  height: 50px;
  background: #F8F9F8;
  border-radius: 3px;
}

<ul class="tab-bar">

  <li class="tab">
    <div class="tab-content">
      <img class="tab-icon" src="http://amazon.com/favicon.ico"/>
      <span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
      <span class="tab-close"></span>
    </div>
  </li>
  
  <li class="tab active-tab">
    <div class="tab-content">
      <img class="tab-icon" src="http://google.com/favicon.ico"/>
      <span class="tab-text">Google</span>
      <span class="tab-close"></span>
    </div>
  </li>
  
  <li class="new-tab"></li>
  
</ul>

<div id="content">

</div>

5 个解决方案

#1

OK here is a fiddle of a css shape like the new tab one you want.

好的，这里是一个css形状的小提琴，就像你想要的新标签一样。

#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/

https://jsfiddle.net/2p74co0q/

For the transparency values, its hard to see from your image but I guess just trial and error. Obviously how your chrome looks is different to how mine looks because of the theme you are using.

对于透明度值，很难从您的图像中看到，但我想只是反复试验。显然，由于您使用的主题，您的镀铬外观与我的外观有何不同。

#2

Had to change many things for it to work properly. Here is the Fiddle. Some notes on changes:

不得不改变很多东西让它正常工作。这是小提琴。一些关于变化的说明：

• Hover didn't work because of pointer-events property on tab class. You can put it under tab-close class or you can use jQuery solution for it to work in old browsers.
• 由于tab类上的指针事件属性，悬停不起作用。您可以将它放在tab-close类下，或者您可以使用jQuery解决方案在旧浏览器中工作。
• I don't see any reason to use negative z-index. I didn't use and it seems to work.
• 我认为没有任何理由使用负z-index。我没有使用它似乎工作。
• For vertical-align to work properly, you should have a constant line-height. Added line-height property to tab class and made all sub classes inherit it so that they will be aligned to middle properly. Also had to wrap images with extra divs for them to align properly.
• 要使vertical-align正常工作，您应该具有恒定的行高。向tab类添加了line-height属性，并使所有子类继承它，以便它们正确地对齐到中间。还必须用额外的div包装图像，以便它们正确对齐。
• About the overlap, if you want a result as in Chrome tabs, you should not use opacity. No matter what you do, if you have opacity, result will look like that. You can use constant color instead.
• 关于重叠，如果您想要在Chrome标签中获得结果，则不应使用不透明度。无论你做什么，如果你有不透明度，结果将是这样的。您可以使用恒定颜色。
• For bottom curve and shadow added new elements. Not sure if it is a must but it looks more like Chrome tabs.
• 对于底部曲线和阴影添加了新元素。不确定它是否必须，但它看起来更像Chrome标签。

For it to work in IE8

为了它在IE8中工作

I tested it on IE8 and it did not look pleasant. Don't know where to start. Here are some thoughts:

我在IE8上进行了测试，看起来并不愉快。不知道从哪里开始。以下是一些想法：

• vertical-align will not work reliably. You can ditch everything with vertical-align and use constant absolute positioning. This means you cannot change tab sizes as you want and you must chose a constant one.
• vertical-align不能可靠地工作。您可以使用vertical-align抛弃所有内容并使用恒定的绝对定位。这意味着您无法根据需要更改选项卡大小，您必须选择常量选项卡。
• You must write filter equivalents of all transform and opacity properties. Your css will look like the darkest place of hell.
• 您必须编写所有变换和不透明度属性的过滤器等效项。你的css看起来像是地狱中最黑暗的地方。
• border-radius will not work. There are some dirty workarounds which I do not suggest. Same for box-shadow.
• border-radius不起作用。有些肮脏的解决方法我不建议。盒阴影相同。

body {
    background: #21C256;
    /* green windows theme */
    /* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}

.tab-bar {
    height: 26px;
    /* tab height */
    line-height: 26px;
    /* this is critical for vertical alligning */
    cursor: default;
    user-select: none;
    /* disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0;
    padding: 0px 7px 0px 7px;
    z-index: 0;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    width: 100%;
    margin: 0;
    font-size: 0;
}

.tab-bottom-curve-left {
    background: inherit;
    border: inherit;
    opacity: inherit;
    border-left: none;
    border-bottom: none;
    width: 10px;
    height: 4px;
    position: absolute;
    left: -5px;
    bottom: -2px;
    z-index: 5;
    transform: rotate(-31deg);
}

.tab-bottom-curve-right {
    background: inherit;
    border: inherit;
    opacity: inherit;
    border-left: none;
    border-bottom: none;
    width: 10px;
    height: 4px;
    position: absolute;
    right: -5px;
    bottom: -2px;
    transform: rotate(31deg);
    /* box-shadow: inherit; */
    z-index: 0;
}

.tab-icon {
    pointer-events: none;
    /* disable image drag */
}

.tab-text {
    width: 80%;
    height: 100%;
    padding-left: 4px;
}

.tab {
    background: #FFFFFF;
    /* inactive tab background color */
    opacity: 0.726;
    /* inactive tab transparency */
    width: 213px;
    /* tab width */
    margin-left: 0px;
    /* tab overlap */
    overflow: hidden;
    height: 100%;
    /*padding-bottom: 1px;*/
    border-radius: 3px;
    /* tab curves */
    transform: perspective(100px) rotateX(20deg);
    /* tab shape angle */
    box-shadow: 0 0 2pt 0 rgba(0, 0, 0, 0.9);
    /* tab outline */
    white-space: nowrap;
    padding-left: 8px;
    /* icon left side margin */
    vertical-align: middle;
    z-index: 1;
    /* inactive tabs are generally in the background */
    line-height: inherit;
    /* margin-left: -1px; */
    /* margin-right: -1px; */
    /* margin-top: -6px; */
    height: 100%;
    vertical-align: top;
    font-size: 0;
    margin-top: 1px;
    overflow: visible;
    position: relative;
    display: inline-block;
    float: left;
    display: block;
}

.tab:hover {
    opacity: 0.8;
}

.tab-content {
    transform: perspective(100px) rotateX(-20deg);
    /* untransform tab content (this makes stuff blurry! :( ) */
    -o-transform: perspective(100px) rotateX(-20deg);
    -ms-transform: perspective(100px) rotateX(-20deg);
    -moz-transform: perspective(100px) rotateX(-20deg);
    -webkit-transform: perspective(100px) rotateX(-20deg);
    -khtml-transform: perspective(100px) rotateX(-20deg);
    line-height: inherit;
    z-index: 5;
    height: 100%;
    font-size: 0;
    overflow: hidden;
    /* position: absolute; */
}

.tab-icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.tab-text {
    display: inline-block;
    vertical-align: middle;
    font-family: arial, sans-serif;
    /* tab text font */
    text-rendering: geometricPrecision;
    /* tab text improve rendering */
    font-size: 12px;
    /* tab text size */
    -webkit-mask-image: linear-gradient(to right, #000, #000, 165px, transparent);
    /* make text fade at the right edge (webkit only)*/
    overflow: hidden;
}

.tab-close {
    display: inline-block;
    height: 100%;
    width: 16px;
    line-height: inherit;
    right: 5px;
    position: absolute;
    z-index: 100000;
    vertical-align: middle;
}

.tab-close-img {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}

.tab-close-img:hover {
    background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}

.active-tab {
    z-index: 2;
    /* active tab is in front of other tabs, but still behind the content box */
    background: linear-gradient(to bottom, #FFFFFF, #F8F9F9);
    /* active tab color */
    /* position: relative; */
    opacity: 1;
    /* padding-bottom: 2px; */
}

.active-tab:hover {
    opacity: 1;
}

.new-tab {
    overflow: hidden;
    width: 25px;
    /* new-tab-button width */
    height: 14px;
    /* new-tab-button height */
    /* margin-top: 7px; */
    /* to vertically center the new-tab-button */
    margin-left: 6px;
    /* margin between tabs and new-tab-button */
    vertical-align: middle;
    box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9);
    /* new-tab-button outline */
    background: #FFFFFF;
    /* new-tab-button color */
    opacity: 0.626;
    /* new-tab-button transparency */
    border-radius: 2px;
    /* new-tab-button curves */
    transform: skew(20deg);
    /* new-tab-button shape angle */
    -o-transform: skew(20deg);
    -ms-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -khtml-transform: skew(20deg);
    -webkit-transform: skew(20deg);
    display: inline-block;
}

.new-tab:hover {
    opacity: 0.8;
}

#content {
    position: absolute;
    z-index: 3;
    /* the content box is always in the foreground */
    width: 100%;
    height: 50px;
    background: #F8F9F8;
    border-radius: 3px;
}

.tab-bottom-shadow {
    /* width: 100%; */
    position: absolute;
    background: black;
    height: 1px;
    bottom: -1px;
    left: 0px;
    right: 0;
    box-shadow: 0 0 4px black;
    z-index: 5;
}

.active-tab .tab-bottom-shadow {
    display: none;
}

<div class="tab-bar">

        <div class="tab">
            <div class="tab-content">
                <span class="tab-icon-wrap"><img class="tab-icon" src="http://amazon.com/favicon.ico" /></span>
                <span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
                <span class="tab-close"><span class="tab-close-img"></span></span>
            </div>
            <div class="tab-bottom-curve-left"></div>
            <div class="tab-bottom-curve-right"></div>
            <div class="tab-bottom-shadow"></div>
        </div>

        <div class="tab">
            <div class="tab-content">
                <span class="tab-icon-wrap"><img class="tab-icon" src="http://youtube.com/favicon.ico" /></span>
                <span class="tab-text">YouTube</span>
                <span class="tab-close"><span class="tab-close-img"></span></span>
            </div>
            <div class="tab-bottom-curve-left"></div>
            <div class="tab-bottom-curve-right"></div>
            <div class="tab-bottom-shadow"></div>
        </div>

        <div class="tab active-tab">
            <div class="tab-content">
                <span class="tab-icon-wrap"><img class="tab-icon" src="http://google.com/favicon.ico" /></span>
                <span class="tab-text">Google</span>
                <span class="tab-close"><span class="tab-close-img"></span></span>
            </div>
            <div class="tab-bottom-curve-left"></div>
            <div class="tab-bottom-curve-right"></div>
            <div class="tab-bottom-shadow"></div>
        </div>

        <div class="new-tab"></div>

    </div>

    <div id="content">
    </div>

#3

Do you have to use pure CSS? Or can you use image mapping. That way, you can create links, hover events with minimal effort, which achieve the same effect.

你必须使用纯CSS吗？或者你可以使用图像映射。这样，您可以创建链接，以最小的努力悬停事件，从而实现相同的效果。

http://www.image-maps.com/ is a great tool to use for projects like this. You could use the polygon tool to select the buttons.

http://www.image-maps.com/是一个很好的工具，可以用于这样的项目。您可以使用多边形工具选择按钮。

Don't worry if this isn't what you're looking for.

如果这不是您想要的，请不要担心。

#4

Please use the below code. I think this is what you are looking for. Demo

请使用以下代码。我想这就是你要找的东西。演示

body {
  background: #21C256; /* green windows theme */
  /* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
  height: 23px; /* tab height */
  cursor: default;
  display: flex;
  user-select: none; /* disable text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none; /* disable image drag */
  margin: 0;
  padding: 0px 7px 0px 7px;
}
.tab {
  background: #FFFFFF; /* inactive tab background color */
  opacity: 0.726; /* inactive tab transparency */
  width: 213px; /* tab width */
  //max-width: 213px; /* messes up the trapezoid angles */
  margin-left: 0px; /* tab overlap */
  float: left;
  overflow: hidden;
  height: 100%;
  display: flex;
  /*padding-bottom: 1px;*/

  border-radius: 3px; /* tab curves */
  transform: perspective(100px) rotateX(20deg); /* tab shape angle */
  box-shadow: 0 0 2pt 0 rgba(0, 0, 0, 0.9); /* tab outline */

  white-space: nowrap;
  padding-left: 8px; /* icon left side margin */
  display: block;
  vertical-align: middle;
  z-index: -2;  /* inactive tabs are generally in the background */
}
.tab:hover {
  opacity: 0.8;
}
.tab-content {
  display: flex;
  justify-content: space-between;
    padding: 4px 9px 0px 0px;
  transform: perspective(100px) rotateX(-20deg); /* untransform tab content (this makes stuff blurry! :( ) */
  -o-transform: perspective(100px) rotateX(-20deg);
  -ms-transform: perspective(100px) rotateX(-20deg);
  -moz-transform: perspective(100px) rotateX(-20deg);
  -webkit-transform: perspective(100px) rotateX(-20deg);
  -khtml-transform: perspective(100px) rotateX(-20deg);
}
.tab-icon {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}
.tab-text {
  display: inline-block;
  text-align: left;
    width: 76%;
  vertical-align: middle;
  font-family: arial, sans-serif; /* tab text font */
  text-rendering: geometricPrecision; /* tab text improve rendering */
  font-size: 12px; /* tab text size */
  -webkit-mask-image: linear-gradient(to right, #000, #000, 200px, transparent); /* make text fade at the right edge (webkit only)*/
}
.tab-close {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  right: 5px;
  background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.tab-close:hover {
  background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.active-tab {
  z-index: -1; /* active tab is in front of other tabs, but still behind the content box */
  background: linear-gradient(to bottom, #FFFFFF, #F8F9F9); /* active tab color */
  position: relative;
  opacity: 1;
  padding-bottom: 2px;
}
.active-tab:hover {
  opacity: 1;
}

.new-tab {
  overflow: hidden;
  float: left;
  width: 25px; /* new-tab-button width */
  height: 14px; /* new-tab-button height */
  margin-top: 5px; /* to vertically center the new-tab-button */
  margin-left: 7px; /* margin between tabs and new-tab-button */
  box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9); /* new-tab-button outline */
  background: #FFFFFF; /* new-tab-button color */
  opacity: 0.626; /* new-tab-button transparency */
  border-radius: 2px; /* new-tab-button curves */
  transform: skew(20deg); /* new-tab-button shape angle */
  -o-transform: skew(20deg);
  -ms-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -khtml-transform: skew(20deg);
  -webkit-transform: skew(20deg); 
}
.new-tab:hover {
  opacity: 0.8;
}

#content {
  z-index: 1; /* the content box is always in the foreground */
  width: 100%;
  height: 50px;
  background: #F8F9F8;
  border-radius: 3px;
}

#5

If you want that the tabs overlap properly, you have to get remove the transparency. My solution also includes various other improvements:

如果您希望选项卡正确重叠，则必须删除透明度。我的解决方案还包括其他各种改进：

body {
  background: #21C256; /* green windows theme */
  /* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
  height: 25px; /* tab height */
  cursor: default;
  user-select: none; /* disable text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none; /* disable image drag */
  margin: 0;
  padding: 0px 7px;
}
.tab {
  background: #BAF1CB; /* inactive tab background color */
  opacity: 1; /* inactive tab transparency */
  width: 213px; /* tab width */
  margin-left: 0px; /* tab overlap */
  float: left;
  overflow: hidden;
  height: 100%;
  padding: 1px 0;
  
  border-radius: 3px; /* tab curves */
  transform: perspective(100px) rotateX(20deg); /* tab shape angle */
  box-shadow: 2px -2px 2px -2px black, -2px -1px 2px -2px black; /* tab outline */
  
  white-space: nowrap;
  padding-left: 8px; /* icon left side margin */
  display: block;
  vertical-align: middle;
  z-index: -2;  /* inactive tabs are generally in the background */
}
.tab:hover {
  background-color: #D0F5DB;
}
.tab-content {
  padding: 2px 0;
  transform: perspective(100px) rotateX(-20deg); /* untransform tab content (this makes stuff blurry! :( ) */
  -o-transform: perspective(100px) rotateX(-20deg);
  -ms-transform: perspective(100px) rotateX(-20deg);
  -moz-transform: perspective(100px) rotateX(-20deg);
  -webkit-transform: perspective(100px) rotateX(-20deg);
  -khtml-transform: perspective(100px) rotateX(-20deg);
}
.tab-icon {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}
.tab-text {
  display: inline-block;
  vertical-align: middle;
  font-family: arial, sans-serif; /* tab text font */
  text-rendering: geometricPrecision; /* tab text improve rendering */
  font-size: 12px; /* tab text size */
  -webkit-mask-image: linear-gradient(to right, #000, #000, 200px, transparent); /* make text fade at the right edge (webkit only)*/
  max-width: 170px;
  overflow: hidden;
}
.tab-close {
  float: right;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: 3px 5px 0 0;
  background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.tab-close:hover {
  background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.active-tab {
  z-index: 1000000; /* active tab is in front of other tabs, but still behind the content box */
  background: linear-gradient(to bottom, #FFFFFF, #F8F9F9); /* active tab color */
  position: relative;
  opacity: 1;
  padding-bottom: 2px;
}
.active-tab:hover {
  opacity: 1;
}

.new-tab {
  overflow: hidden;
  float: left;
  width: 25px; /* new-tab-button width */
  height: 14px; /* new-tab-button height */
  margin-top: 5px; /* to vertically center the new-tab-button */
  margin-left: 7px; /* margin between tabs and new-tab-button */
  box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9); /* new-tab-button outline */
  background: #FFFFFF; /* new-tab-button color */
  opacity: 0.65; /* new-tab-button transparency */
  border-radius: 2px; /* new-tab-button curves */
  transform: skew(20deg); /* new-tab-button shape angle */
  -o-transform: skew(20deg);
  -ms-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -khtml-transform: skew(20deg);
  -webkit-transform: skew(20deg); 
}
.new-tab:hover {
  opacity: 0.8;
}

#content {
  position: relative;
  z-index: 2; /* the content box is always in the foreground */
  width: 100%;
  height: 50px;
  background: #F8F9F8;
  border-radius: 3px;
  border: 1px solid #aaaaaa;
  border-width: 1px 0 0 0;
}

<ul class="tab-bar">

  <li class="tab">
    <div class="tab-content">
      <!-- Move the close-Button to the beginning -->
      <span class="tab-close"></span>
      <img class="tab-icon" src="http://amazon.com/favicon.ico"/>
      <span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
    </div>
  </li>
  
  <li class="tab active-tab">
    <div class="tab-content">
      <span class="tab-close"></span>
      <img class="tab-icon" src="http://google.com/favicon.ico"/>
      <span class="tab-text">Google</span>
    </div>
  </li>
  
  <li class="new-tab"></li>
  
</ul>

<div id="content">

</div>