<template>
  <div style="width: 100%; height: 100%;position: absolute;top:0;z-index:0">
    <i class="corner top-left"/>
    <i class="corner top-right"/>
    <i class="corner bottom-left"/>
    <i class="corner bottom-right"/>
  </div>
</template>
<script>

export default {
  name: 'Corner1'
}
</script>

<style scoped>
.corner{
  position: absolute;
  width: .1rem;
  height: .1rem;
  background: url("../../../assets/overview/module-horn.png") no-repeat;
  background-size: 100% 100%;
}
.corner.top-left{
  top: 0;
  left: 0;
}
.corner.top-right{
  transform:rotate(90deg);
  top: 0;
  right: 0;
}
.corner.bottom-left{
  transform:rotate(270deg);
  bottom: 0;
  left: 0;
}
.corner.bottom-right{
  transform:rotate(180deg);
  bottom: 0;
  right: 0;
}
</style>