Is it possible to create the Firefox tab using CSS ? [duplicate] - css

Question

This question already has answers here:
Add outward curving border to elements like this: ◝◟___◞◜
(3 answers)
Closed 7 years ago.
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.

Answer 1

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>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
tune the border-radius to the shape you look for

Answer 2

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.