箭头div实现

需求如图

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>