Css invert background color - html

Question

At the moment my css looks like this:
But I want the inverse of the green border-radius blocks, I want this:
Any idea how to achieve this with the least amount of extra divs and stuff? Here is my code so far:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>

Answer 1

One possible solution would be using box-shadow for the before and after.
Also you may consider using pointer-events:none for the pseudo-elements since you don't want to block the other elements on the nav.
Another solution would be using svg for your buttons.
.navbar {
background-color: blue;
height: 35px;
overflow:hidden;
}
button {
color: white;
border: none;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
box-shadow: 2px 10px 1px white;
pointer-events:none;
}
button:after{box-shadow: -2px 10px 1px white;}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>

Answer 2

I think you should add a dic contain content text, like this:
.navbar {
background-color: blue;
height: 35px;
}
.content {
color: white;
border: none;
background-color: blue;
height: 100%;
padding: 10px 10px;
cursor: pointer;
}
button{
background-color: white;
padding: 0px;
border: 0px;
margin-left: -4px;
}
button.selected{
background-color: blue;
}
button.selected .content{
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
vertical-align: bottom;
}
button.before-selected .content{
border-bottom-right-radius: 10px;
}
button.after-selected .content{
border-bottom-left-radius: 10px;
}
<div class="navbar">
<button><div class="content">tab1</div></button>
<button class="before-selected"><div class="content">tab2</div></button>
<button class="selected"><div class="content">tab3</div></button>
<button class="after-selected"><div class="content">tab4</div></button>
</div>

Answer 3

I'd suggest using svg with background-image or using the clip-path property on ::before and ::after.

Answer 4

You have to use SVGs on ::before and ::after of the tab element. Here's an example:
header {
background: gray;
}
nav {
padding-top: 10px;
}
.tab {
background: none;
border: none;
padding: 10px;
width: 100px;
}
.tab.selected {
background: white;
border-radius: 10px 10px 0 0;
position: relative;
}
.tab.selected::before,
.tab.selected::after {
content: '';
bottom: 0;
height: 10px;
position: absolute;
width: 10px;
}
.tab.selected::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
left: -10px;
}
.tab.selected::after {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
right: -10px;
transform: scaleX(-1);
}
<header>
<nav>
<button class="tab">Tab</button>
<button class="tab selected">Tab</button>
<button class="tab">Tab</button>
</nav>
</header>
Codepen link.

Answer 5

You can use the following property to get the inverted image of the green border radius blocks:
transform: rotate(180deg);
So your CSS will be like:
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
Or you can use the following and style it better:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
-webkit-box-shadow: inset 0px 6px 5px 0px #000000;
box-shadow: inset 0px 6px 5px 0px #000000;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: inset 4px 8px 5px -3px #000000;
box-shadow: inset 4px 8px 5px -3px #000000;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>