I'm using Bulma CSS Tabs

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 >
  <ul>
    <li >
      <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;
}

CodePudding user response：

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 >
    <ul>
      <li v-for="(tab, idx) in tabs" :key="idx" : @click="activate(idx)">
        <a>
          <span>{{ tab }}</span>
        </a>
      </li>
    </ul>
  </div>
</div>