Expand svg tab as text expands without stretching the sides - css

Question

I have tabs with svg background that stretches to the width of the text. Is there a way to edit my svg or css to fix the curvatures on the sides without splitting up the svg to separate elements or using pseudo after/before css? This way while the whole svg stretches the middle part, the sides would remain intact stretching only the middle rectangle element.
This would fix the "Other important specification" tab's stretched sides.
$(document).ready(function(){
$('.nav-tabs li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});
});
.product-info .row,
.recipe-info .row {
text-align: left;
margin-left: 5px;
}
.product-info .nav-tabs,
.recipe-info .nav-tabs {
border-bottom: 1px solid #def0f8;
}
.product-info .nav-tabs > li,
.recipe-info .nav-tabs > li {
background-color: transparent;
margin-bottom: 0;
overflow: visible;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.product-info .nav-tabs > li > a:hover,
.recipe-info .nav-tabs > li > a:hover {
color: white;
text-decoration: none;
border: 0;
background-color: transparent;
}
.product-info .nav-tabs > li > a,
.recipe-info .nav-tabs > li > a {
border: none;
height: 35px;
background-color: transparent;
padding: 0;
text-align: center;
margin-top: 1px;
z-index: 2;
}
.product-info .nav-tabs > li > a .tabbed,
.recipe-info .nav-tabs > li > a .tabbed {
margin: 0;
height: 35px;
width: auto;
}
.product-info .nav-tabs > li > a .tabbed span,
.recipe-info .nav-tabs > li > a .tabbed span {
font-family: Roboto;
font-weight: 500;
font-size: 16px;
color: #616161;
line-height: 35px;
letter-spacing: 0.01em;
background-color: transparent;
padding: 0;
display: inline;
white-space: nowrap;
min-width: 95px;
}
.product-info .nav-tabs > li.active > a,
.recipe-info .nav-tabs > li.active > a {
color: #ffffff;
z-index: 10;
}
.product-info .nav-tabs > li.active > a .tabbed,
.recipe-info .nav-tabs > li.active > a .tabbed {
background-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 134.5 35' preserveAspectRatio='none' data-name='Layer 1' id='Layer_1'%3E%3Cmetadata id='metadata15'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3Etab%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs3'%3E%3Cstyle id='style5'%3E.cls-1%7Bfill:%2325437f;%7D%3C/style%3E%3C/defs%3E%3Ctitle id='title7'%3Etab%3C/title%3E%3Cpath style='fill:%2325437f;fill-opacity:1' id='path9' transform='translate%280 0%29' d='M0,35H30V0C6.39,0,11.8,35,0,35Z' class='cls-1' /%3E%3Cpath style='fill:%2325437f;fill-opacity:1' id='path11' transform='translate%280 0%29' d='M134.5,35h-30V0C128.11,0,122.7,35,134.5,35Z' class='cls-1' /%3E%3Crect y='-5.5511151e-17' x='29.5' height='35' width='56.5%25' id='rect4143' style='opacity:1;fill:%2325437f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 100% 35px;
background-position: center;
}
.product-info .nav-tabs > li.active > a .tabbed span,
.recipe-info .nav-tabs > li.active > a .tabbed span {
color: #ffffff;
width: 100%;
margin: 0 35px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-info tabbable">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a href="#" data-toggle="tab">
<div class="tabbed">
<span class="">Details</span>
</div>
</a>
</li>
<li>
<a href="#" data-toggle="tab">
<div class="tabbed">
<span class="">Other important specification</span>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<div class="tab-content">
lorem ipsum
</div>
</div>
</div>
Probably nested svg's could solve this, here's a notion of how I imagine achieving the rightly expanding svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="35">
<defs>
<style>
</style>
</defs>
<title>expandable tab</title>
<!--
Whole tab as one path, if possible try to adjust the beizer curves so they
would keep the sides unstreched when image is streched on x axis.
-->
<!--
<path fill="#25437f" d="
m30 0
c-23.5,0 -18,35 -30,35
h30 40 30
c-12,0 -6.5,-35 -30,-35
z"
/>
-->
<!--
The sides should have fixed widths of 30, the middle uses up the available space in between.
-->
<g fill="#25437f">
<svg x="0" width="30" class="container-left">
<path d="m0 35h30v-35c-23.61 0-18.2 35-30 35z" class="path-left" vector-effect="non-scaling-stroke"/>
</svg>
<svg x="29" width="90%" style="overflow: hide;">
<!--
Should have width of 100% shrunken with 30 on the x axis.
Maybe apply a mask?
-->
<rect height="35" width="100%" y="-5.5511e-17"/>
</svg>
<svg x="100%" width="30" class="container-right" transform='translate(-30 0)'>
<!--
Its positioning should be counted from the right to left x="0" starting from right if direction could be set.
Hacking with x="100%" and transform="translate(-30 0)" should be doing the same, but they are not.
-->
<path d="m0 35h-30v-35c23.61 0 18.2 35 30 35z" class="path-right" vector-effect="non-scaling-stroke"/>
</svg>
</g>
</svg>
I'm looking for an implementation that uses pure html/svg/css techniques to adjust the tab size (no javascript adjustments). My goal with this is to replace an html hackery with left, middle and right blocks with one html element thus reducing the chance to mess the tab up, and renders the same way across browsers (from IE11>).
Sticking to my code structure with background-image, related css rules of course is not necessary, there could be even pure svg solutions with <text/> tags just to achieve the expanding tab as the text grows with non-stretching side paths.
Related interesting links:
https://www.sarasoueidan.com/blog/mimic-relative-positioning-in-svg/
https://codepen.io/gionkunz/pen/KDvLj
https://jsfiddle.net/boldewyn/taorj2q6/

Answer 1

Ok I tried changing this for you, and used pure CSS with 3 classes (left, middle, and right) - with different SVG base64 data for each. Still feels a bit hacky, but let me know if this is closer to what you are looking for.
$(document).ready(function(){
$('.nav-tabs li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});
});
ul {
display:block;
width: 100%;
}
li {
list-style:none;
}
.tabbed {
display:inline-block;
}
.nav-tabs {
display: inline-flex;
width: 100%;
}
.tab-content {
margin-top:50px;
margin-left:70px;
}
.tabText {
position:relative;
color:white;
display:inline-block;
z-index:10;
padding:10px;
height:35px;
vertical-align:top;
}
.left {
display:inline-block;
margin:0;
padding:0;
height: 35px;
width: 35px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 35' enable-background='new 0 0 30 35' xml:space='preserve'%3E%3Cpath id='left' fill='%2325437F' d='M0,35h30V0C6.4,0,11.8,35,0,35z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-size:cover;
}
.middle {
display:inline-block;
margin:0;
padding:0;
background-color: #25437F;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 56.5 35' enable-background='new 0 0 56.5 35' xml:space='preserve'%3E%3Crect id='middle' fill='%2325437F' width='56.5' height='35'/%3E%3C/svg%3E%0A");
background-repeat:no-repeat;
background-size:cover;
width:auto;
height:35px;
margin-left:-6px;
}
.right {
display:inline-block;
margin:0;
padding:0;
height: 35px;
width: 35px;
margin-left:-6px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 35' enable-background='new 0 0 30 35' xml:space='preserve'%3E%3Cpath id='right' fill='%2325437F' d='M30,35H0V0C23.6,0,18.2,35,30,35z'/%3E%3C/svg%3E%0A");
background-repeat:no-repeat;
background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-info tabbable">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a href="#" data-toggle="tab">
<div class="tabbed">
<div class="left">
<div class="tabText"></div>
</div>
<div class="middle">
<div class="tabText">Details</div>
</div>
<div class="right">
<div class="tabText"></div>
</div>
</div>
</a>
</li>
<li>
<a href="#" data-toggle="tab">
<div class="tabbed">
<div class="left">
<div class="tabText"></div>
</div>
<div class="middle"><div class="tabText">Other important specification</div></div>
<div class="right">
<div class="tabText"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<div class="tab-content">
lorem ipsum
</div>
</div>
</div>