<template>
  <div style="wdith: 100%; height: 100%;">
    <i class="corner top-left"></i>
    <i class="corner top-right"></i>
    <i class="corner bottom-left"></i>
    <i class="corner bottom-right"></i>
  </div>
</template>
<script>

export default {
}
</script>

<style scoped>
.corner{
  position: absolute;
  width: .1rem;
  height: .1rem;
  background: url("../assets/images/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>