user220755 user220755 - 1 year ago 131
CSS Question

Is there a way to create a chrome-like tab using css?

I have been looking for a Google Chrome-like tab written using css but cannot find one.

Sorry, to make sure I am clear, I am trying to replicate the look in order to use it in a web application or a website

Answer Source

yeah its possible, with css3

Ive posted a blog about how to its a lil depthy, and sadly enouth not going to work on ie unless you use images


Removed old reference to redeyeoperations cause its a link farm now. This is a bit lighter version also it is up on a 3rd party site, so its less likely to be down.

Here is the code


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


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

  background : #2BA6CB;
  margin: 0;
  padding: 0;
  max-height: 35px;

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

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

ul.tabs >{
  border-color : transparent #efefef transparent transparent;

ul.tabs >{
  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;
  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 for tab switching ~ include jquery to get working or visit the codepen

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

tabs.on("click", function(){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download