Inverse curve on side of button - html

Question

so i have the following design for some "button tabs".
One side is curved, so border radius would not really be possible.
But is this type of curve even possible ?
or am i doomed to use some sort of image?
mostly looking for tips on how this might be accomplished, or somewhere i can look for a solution, since my previous tries to find a solution has yet to yield a result.
Html
<div class="tab-row">
<button>All Products<div class="tab-row__counter">20</div></button>
<button>Hardware<div class="tab-row__counter">20</div></button>
<button>Virtual<div class="tab-row__counter">20</div></button>
<button>Bundles<div class="tab-row__counter">20</div></button>
</div>
Css
.tab-row{
button{
background-color:$element-bg;
border:0;
color:$white;
width:300px;
height:90px;
margin-right:20px;
margin-top:40px;
border-radius: 5px 100px 0 0;
&:first-child{
margin-left:40px;
}
.tab-row__counter{
}
}
}
This is what i ended up with as a result,
https://codepen.io/andrelange91/pen/YzPqJXO
not exactly curved but close enough

Answer 1

You can try the curves by using the border-radius, transform, and transform-origin properties like,
/**
* Slanted tabs with CSS 3D transforms
* See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
*/
body { padding: 50px;background:#20273d }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1.5em 2em 1em 1em;
color:#9a9a9a;
text-decoration: none;
margin: 0 -7px;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: .5em; left: 0;
z-index: -1;
border-radius: 10px 10px 0 0;
background: #434f78;
box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom left;
}
nav a.selected {
z-index: 2;
color:#FFF;
}
<nav class="left">
All Products
Hardware
Virtual
</nav>
You can use radial gradient also,
body { padding: 50px;background:#20273d }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1em 5em 1.2em 1em;
color:#9a9a9a;
text-decoration: none;
margin: 0 -20px;
border: 0px none;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0;
right: 0;
bottom: .5em;
left: 0;
z-index: -1;
background: radial-gradient(circle at top right,transparent 5.8vw, #434f78 6.8vw);
transform: perspective(10px) rotateX(1deg);
transform-origin: bottom left;
border: 0px none;
}
nav a.selected {
z-index: 2;
color:#FFF;
}
<nav class="left">
All Products
Hardware
Virtual
</nav>

Answer 2

Whilst this does not replicate the exact shape you're after, this does provide an example of the method I described in the comments in how to approach it. You will just need to edit the values in ::before and ::after to get it to your desired shape.
.curve {
background: blue;
width: 50px;
height: 75px;
position: relative;
}
.curve:before {
content: '';
background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);
position: absolute;
top: 0;
left: 100%;
width: 100px;
height: 75px;
}
.curve:after {
content: '';
position: absolute;
width: 50px;
height: 75px;
background: blue;
border-radius: 0 0 100% 0 / 0 0 100% 0;
top: 100%;
left: 0;
}
.container {
display: flex;
align-items: flex-start;
justify-content: center;
}
.tab {
height: 150px;
width: 300px;
background: red
}
<div class="container">
<div class="tab"></div>
<div class="curve"></div>
</div>
Also take a look at Creating s-shaped curve using css