Is it possible to create the Firefox tab using CSS ?

Question

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.

I did. So the answer is yes. Shall I put that down below so you can select it? — j08691, Oct 27 '15 at 19:42
If you're going with SVG, [here is an example](http://jsfiddle.net/adamk33n3r/6Mw6N/3/) of a shape you might be able to use as a launchpad. — user1717828, Oct 27 '15 at 19:43
@j08691 If you're hunting this just post an answer with indications it should be enough, thanks. — kursus, Oct 27 '15 at 19:44
My point is that you need to show an attempt at soling your own question. As it stands now, your question doesn't show any effort or research. — j08691, Oct 27 '15 at 19:48
Okay, I made one that works with a single element and CSS, see my answer :) — Jacob G, Oct 27 '15 at 20:37

score 3 · Accepted Answer · answered Oct 27 '15 at 20:12

3

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

answered Oct 27 '15 at 20:12

G-Cyrillus

101,410
14
105
129

1

I can smell a firefox developer here... ;) – Christoph Oct 27 '15 at 21:30
@Christoph a non firefoxe tester would do more like http://codepen.io/anon/pen/KdRNNg of course ;) – G-Cyrillus Oct 27 '15 at 21:45
+1 for being really close! ;) When fiddling with the values a bit more one could possible remove the rough edge, but nicely done. Alternatively one could use a boder image or clip paths ([in probably 1 or two years...](http://caniuse.com/#search=path) :-D) – Christoph Oct 27 '15 at 23:29
Thank you very much this is great, I will try to reduce the markup. – kursus Oct 29 '15 at 08:40
That’s not quite the same result. The left and right edges are _slanted_ in the question, not only curved. – Sebastian Simon Jun 15 '21 at 23:55
@SebastianSimon seemed to be close enough for the op while mask/clip-path was not yet widely avalaible at the time of the question. ;) – G-Cyrillus Jun 16 '21 at 08:49

Jacob G · Answer 2 · 2015-10-27T20:51:17.403

Codepen Demo

Okay, I have come up with an extremely messy solution, but, it only requires a single HTML element:

@charset "UTF-8";
body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #079FD9;
}

div {
  background: white;
  /*Note that if you change this color, make sure you change the background of the pseudo  elements*/
  display: inline-block;
  padding: 10px;
  padding-right: 20px;
  /*These paddings are to make sure the pseudo  elements do not overlap the text*/
  padding-left: 20px;
  border-radius: 0 0 10px 10px;
  position: relative;
  margin-left: 30px;
  color: #079FD9;
  font-family: open sans;
  /*This is, of course, optional*/
  font-size: 16pt;
}
div:before, div:after {
  content: "•";
  /*Very Hacky*/
  font-family: Times New Roman !important;
  /*Makes sure the font won't mess it up*/
  color: #079FD9;
  /*Change this to the background color *around* the element*/
  font-size: 200px;
  line-height: 7px;
  position: absolute;
  overflow: hidden;
  top: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  width: 30px;
  height: 30px;
  background: white;
}
div:after {
  right: -19px;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
div:before {
  left: -19px;
  -webkit-transform: rotateY(180deg) rotateX(180deg);
  transform: rotateY(180deg) rotateX(180deg);
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div>Mozilla</div>

It is a very hacky solution, and uses a bullet(•) to cover the div. But it works. You will have to play around with it until you find how you want it to work.

That’s not quite the same result. The left and right edges are _slanted_ in the question, not only curved. — Sebastian Simon, Jun 15 '21 at 23:55

Is it possible to create the Firefox tab using CSS ?

2 Answers2

Codepen Demo

Linked