<div class="text-wrap">
<div class="right box">Right</div>
<div class="left box">Left</div>
<div class="top box">Top</div>
<div class="bottom box">Bottom</div>
</div>
.text-wrap {
width:100;
height:auto;
aspect-ratio: 1/1;
position:relative;
background-color: rgb(199, 199, 255);
background:linear-gradient(blue,blue) center/100% 1px no-repeat,linear-gradient(blue,blue) center/1px 100% no-repeat, rgb(199, 233, 255);
}
.top {
right:50%;
top:0;
transform: translateX(50%);
}
.left {
transform-origin: top left;
left:0;
top:50%;
transform: rotate(-90deg) translateX(-50%);
}
.right {
transform-origin:top right;
right:0;
top:50%;
transform: rotate(90deg) translateX(50%);
}
.bottom {
left:50%;
bottom:0;
transform: translateX(-50%);
}
.box {
position: absolute;
background-color: blue;
color: white;
padding:10px;
font-size:25px;
}
Was this article helpful?