Bulma CSS Tabs Component Implement Angled Borders With Vue - html

Question

I'm using Bulma CSS Tabs component with the is-boxed modifier. Fantastic out of the box styling but I would like to change how the active tabs' borders look. What I wanted to achieve is:
I've tried skewing the elements, but it's really not working as expected as I have to take into consideration the next list item especially in the middle when active. Here's what I've tried so far:
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span>Music</span>
</a>
</li>
<li>
<a>
<span>Videos</span>
</a>
</li>
</ul>
</div>
This is the CSS:
li.is-active a {
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
border-top: 0;
border-left: 0;
}
li.is-active a span {
-webkit-transform: skew(-20deg) !important;
-moz-transform: skew(-20deg) !important;
-ms-transform: skew(-20deg) !important;
-o-transform: skew(-20deg) !important;
transform: skew(-20deg) !important;
}

Answer 1

Maybe like following snippet (plain css):
const app = Vue.createApp({
data() {
return {
tabs: ['Pictures', 'Music', 'Videos'],
active: 0,
};
},
methods: {
activate(id) {
this.active = id
}
}
})
app.mount('#demo')
.tabs ul {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style-type: none;
margin: .5em 1em;
}
.is-active:before, .is-active:after {
border: none;
}
li {
position: relative;
padding: 0.3em 0.8em;
cursor: pointer;
z-index: 0;
}
li:before,
li:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
width: 70%;
}
li:before {
left: -1px;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
li:after {
right: -1px;
border-right: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
li:after,
li:nth-child(odd):before {
transform: skewX(-15deg)
}
li:before,
li:nth-child(odd):after {
transform: skewX(15deg)
}
li:first-of-type:before {
transform: skewX(0deg)
}
li:last-of-type:after {
transform: skewX(0deg)
}
li:hover {
color: #fff;
}
li:hover:before,
li:hover:after {
background: #000;
}
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<div class="tabs is-boxed">
<ul>
<li v-for="(tab, idx) in tabs" :key="idx" :class="active === idx && 'is-active'" #click="activate(idx)">
<a>
<span>{{ tab }}</span>
</a>
</li>
</ul>
</div>
</div>