.breadcrumb input[type="radio"] {
display: none;
}
.breadcrumb input[type="checkbox"] {
display: none;
}
.question-header input[type="radio"] {
display: none;
}
.panel-body input[type="radio"]~label {
cursor: pointer;
width: 100%;
text-align: center;
padding: 10px 15px;
margin: 0;
}
.panel-body input[type="radio"]:checked~label {
background: #6FA8DC;
color: white;
}
.breadcrumb {
background: black;
display: inline-block;
padding: 1px;
padding-right: 18px;
}
.breadcrumb a {
display: inline-block;
background: white;
padding: 5px 30px 5px 30px;
position: relative;
text-decoration: none;
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
margin-right: -17px;
}
.breadcrumb a#last {
-webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
}
.breadcrumb a:hover {
color: white;
background: #369F00;
}
/* first link should not have anything clipped on the left side */
.breadcrumb a:first-child {
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
padding-left: 20px;
}
.label {
height: 100%;
width: 100%;
}<div class="breadcrumb">
<a href="#" data-toggle="modal" data-target="#inviteModal" id="invite-breadcrumb">
First
</a>
<a href="#" data-bind="css:{selected:applicationsFilter() === 'new'}">
<label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'new'}">
<input type="radio" value="new" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'new'}" class="radcss" name="app" id="newapp">
Second
</label>
</a>
<a href="#" data-bind="css:{selected:applicationsFilter() === 'shortlisted'}">
<label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'shortlisted'}">
<input type="radio" value="shortlisted" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'shortlisted'}" class="radcss" name="app" id="shortapp">
Third
</label>
</a>
<a href="#" data-bind="css:{selected:applicationsFilter() === 'connected'}" id="last">
<label class="radio-inline" data-bind="css:{selected:applicationsFilter() === 'connected'}">
<input type="radio" value="connected" data-bind="checked: applicationsFilter, css:{selected:applicationsFilter() === 'connected'}" class="radcss" name="app" id="connapp">
Fourth
</label>
</a>
</div>When the window size is large enough it looks good like in the following image:
https://i.sstatic.net/wSsM9.png
However, when I reduce the window size, it becomes unattractive. I need assistance to make it responsive and organized. Additionally, I would like to eliminate the black background that appears when shrinking the window.