css标签样式，火箭，梯形

<template>
  <div class="co-header">
      <div
      v-for="(item,index) of head"
      :key="index"
      class="block"
      :class="{chose: module===item.value}"
    >
      {{ index }}
    </div>
  </div>
</template>

<script>
import store from '@/store'
export default {
  props:{
    head:[],
  },
  computed:{
      question(){
      return store.state.cognitivuNowquestion
      },
  },
  data(){
    return {
      a:1
    }
  }
}
</script>

<style lang="scss" scoped>
.co-header {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.block {
  position: relative;
  width: 256px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  color: #0e1728;
  text-align: center;
  border-bottom: 1px solid #e4ebf0;

  &::after {
    position: absolute;
    top: 0;
    left: -20px;
    width: 0;
    height: 0;
    content: "";
    border-top: 20px solid #fff;
    border-right: 20px solid #fff;
    border-bottom: 20px solid #fff;
    border-left: 20px solid transparent;
  }

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    content: "";
    border-top: 20px solid #e4ebf0;
    border-right: 1px solid #e4ebf0;
    border-bottom: 20px solid #e4ebf0;
    border-left: 20px solid transparent;
  }

  &:nth-child(1) {
    flex: 1;

    &::after {
      border: 0;
    }
  }

  &:last-child {
    flex: 1;

    &::before {
      border: 0;
    }
  }
}

.chose {
  background: $--color-primary;

  &::before {
    border-top: 20px solid  $--color-primary;
    border-right: 1px solid  $--color-primary;
    border-bottom: 20px solid  $--color-primary;
  }

  &::after {
    border-top: 20px solid $--color-primary;
    border-right: 20px solid $--color-primary;
    border-bottom: 20px solid $--color-primary;
  }
}
</style>