有沒有辦法使用css創建一個類似Chrome的選項卡？

Question

我一直在尋找使用css編寫的谷歌瀏覽器樣式選項卡，但找不到一個。

對不起，確保我很清楚，我想複製一下，才能在Web應用程序或網站

Answer 1

是的它的可能，CSS3

香港專業教育學院發佈了關於如何對其律depthy，而可悲的是enouth不會，除非你使用的圖片

上即工作博客

編輯：

刪除舊參考redeyeoperations現在導致它的一個鏈接農場。 這是一個比較輕的版本，它在第三方網站上也是如此，因此它不太可能被關閉。

http://codepen.io/jacoblwe20/pen/DxAJF

下面是代碼

HTML

<div class=tab-container> 
    <ul class="tabs clearfix" > 
    <li> 
     <a href=# >Users</a> 
    </li> 
    <li class=active > 
     <a href=# >Pending Lots</a> 
    </li> 
    <li> 
     <a href=# >Nearby Lots</a> 
    </li> 
    <li> 
     <a href=# >Recent Lots</a> 
    </li> 
    </ul> 
</div> 
<div class=outer-circle></div> 

CSS

body{ 
    background : #efefef; 
    font : .8em sans-serif; 
    margin: 0; 
} 

.tab-container{ 
    background : #2BA6CB; 
    margin: 0; 
    padding: 0; 
    max-height: 35px; 
} 

ul.tabs{ 
    margin: 0; 
    list-style-type : none; 
    line-height : 35px; 
    max-height: 35px; 
    overflow: hidden; 
    display: inline-block; 
    padding-right: 20px 
} 

ul.tabs > li.active{ 
    z-index: 2; 
    background: #efefef; 
} 

ul.tabs > li.active:before{ 
    border-color : transparent #efefef transparent transparent; 
} 


ul.tabs > li.active:after{ 
    border-color : transparent transparent transparent #efefef; 
} 

ul.tabs > li{ 
    float : right; 
    margin : 5px -10px 0; 
    border-top-right-radius: 25px 170px; 
    border-top-left-radius: 20px 90px; 
    padding : 0 30px 0 25px; 
    height: 170px; 
    background: #ddd; 
    position : relative; 
    box-shadow: 0 10px 20px rgba(0,0,0,.5); 
    max-width : 200px; 
} 

ul.tabs > li > a{ 
    display: inline-block; 
    max-width:100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    text-decoration: none; 
    color: #222; 
} 

ul.tabs > li:before, ul.tabs > li:after{ 
    content : ''; 
    background : transparent; 
    height: 20px; 
    width: 20px; 
    border-radius: 100%; 
    border-width: 10px; 
    top: 0px; 
    border-style : solid; 
    position : absolute; 
} 

ul.tabs > li:before{ 
    border-color : transparent #ddd transparent transparent; 
    -webkit-transform : rotate(48deg); 
    -moz-transform : rotate(48deg); 
    -ms-transform : rotate(48deg); 
    -o-transform : rotate(48deg); 
    transform : rotate(48deg); 
    left: -23px; 
} 

ul.tabs > li:after{ 
    border-color : transparent transparent transparent #ddd; 
    -webkit-transform : rotate(-48deg); 
    -moz-transform : rotate(-48deg); 
    -ms-transform : rotate(-48deg); 
    -o-transform : rotate(-48deg); 
    transform : rotate(-48deg); 
    right: -17px; 
} 

/* Clear Fix took for HTML 5 Boilerlate*/ 

.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

JS的標籤交換〜包括jQuery來獲得工作或訪問codepen

var tabs = $('.tabs > li'); 

tabs.on("click", function(){ 
    tabs.removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 2

你有沒有嘗試過的jQuery UI可以在這裏找到使用它：

http://jqueryui.com

Answer 3

我發現這個在CSS技巧，真的隱藏得更深：

http://css-tricks.com/examples/MovingHighlight/

Answer 4

我只是給一些像獲得鉻一樣的選項卡的CSS，休息它由你來使用，只要你想。

<style type='text/css'> 
    .chrome_tab { 
    width: 150px; 
    height: 0; 
    border-left: 12px solid transparent; 
    border-right: 12px solid transparent; 
    border-bottom: 20px solid grey; 
    border-radius: 80px 80px 2px 2px; 
    color: white; 
    text-align: center; 
    } 
</style> 


<div class='chrome_tab'> 
    muhammad(peace be upon him) 
</div> 

這裏演示 http://jsfiddle.net/GH7d6/

Answer 5

This github project似乎做它，但它不看我的IE 11的好... :(

Answer 6

如果您需要在引導和AngularJS解決方案。我做了一個自己他們的風格與覆蓋缺省引導風格

您可以檢查這裏的教程： https://scotch.io/tutorials/build-chrome-like-tabs-with-bootstrap-and-angularjs

並抓住這裏的代碼：https://github.com/imjustd/chrome-tabs

Answer 7

這個怎麼樣： http://codepen.io/justd/pen/dPeKEG/

查找政黨成員here。

@import "compass/css3"; 

@import "compass"; 

.tab-container { 
    background: #8dc8fb; 
    margin: 0; 
    padding: 0; 
    max-height: 40px; 

    ul { 
    &.nav-tabs { 
     margin: 0; 
     list-style-type: none; 
     line-height: 40px; 
     max-height: 40px; 
     overflow: hidden; 
     display: inline-block; 
     @include display-flex; 
     padding-right: 20px; 
     border-bottom: 5px solid #f7f7f7; 

     $color: #c3d5e6; 

     > li { 
     $raduis: 28px 145px; 

     margin: 5px -14px 0; 
     @include border-top-left-radius($raduis); 
     @include border-top-right-radius($raduis); 
     padding: 0 30px 0 25px; 
     height: 170px; 
     background: $color; 
     position: relative; 
     @include box-shadow(0 4px 6px rgba(0,0,0,.5)); 
     width: 200px; 
     max-width: 200px; 
     min-width: 20px; 
     border:1px solid #aaa; 

     &:first-child { 
      margin-left: 0; 
     } 

     &:last-of-type { 
      margin-right: 0; 
     } 

     > a { 
      display: block; 
      max-width:100%; 
      text-decoration: none; 
      color: #222; 
      padding: 3px 7px; 

      span { 
      overflow: hidden; 
      white-space: nowrap; 
      display: block; 
      } 

      &:focus, 
      &:hover { 
      background-color: transparent; 
      border-color: transparent; 
      } 

      .glyphicon-remove { 
      color: #777; 
      display: inline-block; 
      padding:3px; 
      font-size: 10px; 
      position:absolute; 
      z-index: 10; 
      top:7px; 
      right: -10px; 
      @include border-radius(50%); 

      &:hover { 
       background: #d39ea3; 
       color: white; 
       @include box-shadow(inset 0 1px 1px rgba(0,0,0,.25)); 
       @include text-shadow(0 1px 1px rgba(0,0,0,.25)); 
      } 
      } 
     } 

     &.active { 
      z-index: 2; 
      @include background-image(linear-gradient(white, #f7f7f7 30px)); 

      > a { 
      background-color: transparent; 
      border-color: transparent; 
      border-bottom-color: transparent; 

      &:focus, 
      &:hover { 
       background-color: transparent; 
       border-color: transparent; 
       border-bottom-color: transparent; 
      } 
      } 
     } 
     } 

     .btn { 
     float: left; 
     height: 20px; 
     width: 35px; 
     min-width: 35px; 
     max-width: 35px; 
     margin: 10px 0 0 0; 
     border-color: #71a0c9; 
     outline: none; 

     @include transform(skew(30deg)); 

     &.btn-default { 
      background: $color; 

      &:hover { 
      background: #d2deeb; 
      } 

      &:active { 
      background: #9cb5cc; 
      } 
     } 
     } 
    } 
    } 

    .tab-pane { 
    padding: 60px 40px; 
    text-align: center; 

    &.active { 
     border-top:1px solid #ddd; 
    } 
    } 
}