<template>
  <div class="conner_mark">
    <div class="conner_mark_left1"/>
    <div class="conner_mark_left2"/>
    <div class="conner_mark_left3"/>
    <div class="conner_mark_right1"/>
    <div class="conner_mark_right2"/>
    <div class="conner_mark_right3"/>
  </div>
</template>

<script>
export default {
  name: "CornerMarkLarge"
};
</script>

<style scoped>

.conner_mark {
  position: absolute;
  height: 100%;
  width: 100%;
}

.conner_mark_left1 {
  position: absolute;
  left: -0.2rem;
  top: -0.2rem;
  border-top: 3.1rem solid var(--container-border-color);
  border-right: 3.1rem solid transparent;
}

.conner_mark_left2 {
  position: absolute;
  left: -0.2rem;
  top: -0.2rem;
  border-top: 2.8rem solid var(--global-background-color);
  border-right: 2.8rem solid transparent;
}

.conner_mark_left3 {
  position: absolute;
  left: -0.2rem;
  top: -0.2rem;
  border-top: 2.4rem solid var(--corner-background-color);
  border-right: 2.4rem solid transparent;
}


.conner_mark_right1 {
  position: absolute;
  right: -0.2rem;
  top: -0.2rem;
  border-top: 3.1rem solid var(--container-border-color);
  border-left: 3.1rem solid transparent;
}

.conner_mark_right2 {
  position: absolute;
  right: -0.2rem;
  top: -0.2rem;
  border-top: 2.8rem solid var(--global-background-color);
  border-left: 2.8rem solid transparent;
}

.conner_mark_right3 {
  position: absolute;
  right: -0.2rem;
  top: -0.2rem;
  border-top: 2.4rem solid var(--corner-background-color);
  border-left: 2.4rem solid transparent;
}

</style>

