Search code examples
csscss-shapes

Is it possible to create the Firefox tab using CSS ?

I can't find a non-ugly (no extra markup or fixed width) way to do draw the Firefox tab shape with CSS.

Even Mozilla use a png image.

Firefox tab

Solution

  • if you use a basic <nav> or a list (<ul>) , you could achieve this from a single link(<a>) and pseudo-elements DEMO

    nav,
ul {
  padding: 0 0 0.25em;
}

li {
  display: inline-block;
  padding: 0 1.2em;
}

li a {
  display: inline-block;
  line-height: 2em;
  color: white;
  padding: 0 0.5em;
  border-radius: 0 0 2em 2em/2.5em;
  position: relative;
}

li a:before,
li a:after {
  content: '';
  position: absolute;
  height: 2em;
  width: 1.25em;
  top: 0;
}

li a:before {
  right: 100%;
  border-radius: 0 1em 0 0/1.5em
}

li a:after {
  left: 100%;
  border-radius: 1em 0 0 0/1.5em
}

nav {
  background: #0976B8;
}

li a:hover,
li a.active {
  background: white;
  color: #0976B8
}

li a:hover:before,
li a.active:before {
  box-shadow: 0.5em -1em 0 white;
}

li a:hover:after,
li a.active:after {
  box-shadow: -0.5em -1em 0 white;
}
    <nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#" class="active">About</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

    tune the border-radius to the shape you look for