<template>
  <div class="polygon-div">
    <el-image
      :src="imageSrc"
      fit="fill"
    />
  </div>
</template>

<script>
export default {
  name: 'PolygonItem',
  props: {
    imageSrc: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped lang="scss">
.polygon-div{
  width: 60px;
  height: 80px;
  margin:4px auto;
  background-color: transparent;
  border-top: 1px solid rgba(255,255,255, 0.7);
  border-bottom: 1px solid rgba(255,255,255, 0.7);
  position: relative;
  padding: 10px;
  ::v-deep {
    .el-image {
      width: 45px;
      height: 60px;
    }
  }
}
.polygon-div::before{
  content: '';
  width: 56px;
  height: 56px;
  position: absolute;
  top:11px;
  left:-28px;
  transform: rotate(45deg);
  background-color: transparent;
  border-left: 1px solid rgba(255,255,255, 0.7);
  border-bottom: 1px solid rgba(255,255,255, 0.7);
}
.polygon-div:after{
  content: '';
  width: 56px;
  height: 56px;
  position: absolute;
  top:11px;
  right:-28px;
  transform: rotate(45deg);
  background-color: transparent;
  border-right: 1px solid rgba(255,255,255, 0.7);
  border-top: 1px solid rgba(255,255,255, 0.7);
}
</style>
