<div class="container">

<div class="t-right"></div>

<div class="t-left"></div>

<div class="s-left"></div>

<div class="s-right"></div>
  
<div class="b-right"></div>

<div class="b-left"></div>
  
</div>

.container {
  width:80%;
  height:80vh;
  margin:5vh auto;
  border:2px solid;
  position:relative;
  background:linear-gradient(red,red) center/100% 1px no-repeat
}
.t-left{
  left:-2px;
  top:0;
  transform: translateX(-100%) scale(var(--s,1));
}
.t-right{
  right:-2px;
  top:0;
  transform: translateX(100%) scale(var(--s,1));
}
.b-left{
  left:-2px;
  bottom:0;
  transform: translateX(-100%) scale(var(--s,1));
}
.b-right{
  right:-2px;
  bottom:0;
  transform: translateX(100%) scale(var(--s,1));
}
.s-left{
  left:-2px;
  top:50%;
  transform: translate(-100%,-50%) scale(var(--s,1));
}
.s-right{
  right:-2px;
  top:50%;
  transform: translate(100%,-50%) scale(var(--s,1));
}
.container > [class]:hover {
  --s:-1;
}


.container > [class] {
  position: absolute;
  background-color: lightblue;
  padding:10px;
  font-size:25px;
  text-transform:uppercase;
  font-family:sans-serif;
  writing-mode:vertical-lr;
}
.container > [class]::before {
  content:attr(class);
}