需求如图
1645450081(1).jpg
<template>
<div class="wrapper">
<div class="top" :class="actived ? 'actived' : ''"></div>
<div class="content">
<slot></slot>
</div>
<div class="bottom" :class="actived ? 'actived' : ''"></div>
</div>
</template>
<script>
export default {
props: ['actived'],
methods: {
click() {
}
}
}
</script>
<style lang="less">
.wrapper {
cursor: pointer;
display: inline-block;
padding-left: 5px;
position: static;
.top,
.bottom {
width: 200px;
height: 15px;
border: 2px solid grey;
}
.top {
transform: skewX(30deg);
transform-origin: left top;
border-bottom: unset;
}
.top.actived, .bottom.actived {
background: red;
}
.bottom {
transform: skewX(-30deg);
transform-origin: left bottom;
border-top: unset;
}
.content {
width: 200px;
position: absolute;
text-align: center;
top: 0;
z-index: 100;
line-height: 50px;
}
}
</style>
