There is this similar post, but it seems to be about the opposite problem, and the solutions are somewhat complex, and I’m hoping there is an easier solution.
What I’m after is to fill a box-shaped container with text that’s at an angle. What I have for now is:
.container {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
overflow: hidden;
}
.rotated {
position: relative;
height: 150%;
width: 150%;
top: 50%;
left: 50%;
transform: rotate(15deg) translate(-50%, -50%);
}<div class="container">
<div class="rotated">
Lorem ipsum dolor sit amet, officia
excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem
pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur
officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet
voluptate voluptate dolor minim nulla est proident. Nostrud officia
pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat
reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia
voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem
sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur
duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea
consectetur et est culpa et culpa duis.
</div>
</div>However, the issue is that depending on the size of the container (which is device-dependent), the text doesn’t always fill the whole container. I could make the inner div (.rotated) larger, e.g. 250%, but then I need to add more text to fill everything.
Instead, I’m wondering if there’s a way to make the bounding box of the rotated text not rotated itself, so that it can match the container’s shape, and the text would just fill the container naturally. I tried looking at SVG and shape-outside, but I couldn’t figure it out. I’m wondering if a fill pattern could be used? The text should not be selectable or readable by an accessibility reader, it’s more for decoration.
Thanks!