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

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

Edit:

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.

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

Here is the code

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

What about this : http://codepen.io/justd/pen/dPeKEG/

Find tuto 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;
    }
  }
}

I am just giving some css for getting chrome like tabs, rest its up to you to use as you want.

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

demo here http://jsfiddle.net/GH7d6/