<template>
  <div class="boxTemplate">
    <div class=" boxBorderColor1 boxBlock" :style="{...boxStyle}">
      <div class="boxBorderColor2 boxTop"></div>
      <div class="boxBorderColor2 boxLeft"></div>
      <div class="boxBorderColor2 boxBottom"></div>
      <div class="boxBorderColor2 boxRight"></div>
      <slot name="content"></slot>
    </div>
  </div>

</template>

<script>
export default {
  name: 'boxTemplate',
  props: {
    boxStyle: {
      type: Object
    }
  }
}
</script>

<style lang="scss">
.boxBlock {
  position: relative;
  clip-path: polygon(
    14px 0,
    calc(100% - 14px) 0,
    100% 14px,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    14px 100%,
    0 calc(100% - 14px),
    0 14px
  );
  background-size: 50% 51%;
  background-repeat: no-repeat;
}
.boxTop {
  &::after {
    position: absolute;
    content: "";
    top: -1px;
    left: 14px;
    width: 20px;
    height: 2px;
  }
  &::before {
    position: absolute;
    content: "";
    top: -1px;
    right: 14px;
    width: 20px;
    height: 2px;
  }
}
.boxLeft {
  &::after {
    position: absolute;
    content: "";
    top: 14px;
    left: -1px;
    width: 2px;
    height: 20px;
  }
  &::before {
    position: absolute;
    content: "";
    bottom: 14px;
    left: -1px;
    width: 2px;
    height: 20px;
  }
}
.boxBottom {
  &::after {
    position: absolute;
    content: "";
    bottom: -1px;
    left: 14px;
    width: 20px;
    height: 2px;
  }
  &::before {
    position: absolute;
    content: "";
    right: 14px;
    bottom: -1px;
    height: 2px;
    width: 20px;
  }
}
.boxRight {
  &::after {
    position: absolute;
    content: "";
    right: -1px;
    top: 14px;
    width: 2px;
    height: 20px;
  }
  &::before {
    position: absolute;
    content: "";
    right: -1px;
    bottom: 14px;
    height: 20px;
    width: 2px;
  }
}
</style>