Surround content with a border made out of text

Question

What I'm trying to accomplish here is having some content, in this case the word 'NO' (font-size big enough for the idea of course) and surround it with Master Yodas quote as some kind of 'border'.

#boxContent {
  font-size: 55px;
  font-weight: normal;
}

body {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}

#bodyFormat {
  margin: 100px;
  padding: 10px;
  background-color: salmon;
  width: 250px;
  height: 125px;
}

.boxSides {
  display: inline-block;
  border: solid 2px darkGreen;
  /*height: 100px*/
}

#LeftBorder {
  transform: rotate(-90deg);
  /*margin: 40px 0 0 0;*/
}

#RightBorder {
  transform: rotate(90deg);
  /*margin: -80px 0 0 100px;*/
}

#bottomBorder {
  transform: rotate(180deg);
}

<div id=bodyFormat>
  <!--Close Box top-->
  <div>DO OR DO NOT</div>

  <!--Close Box left side-->
  <span class="boxSides" id="LeftBorder">BE WITH YOU</span>

  <!--Inside Box-->
  <span id="boxContent">NO</span>

  <!--Close Box right side-->
  <span class="boxSides" id="RightBorder">MAY THE FORCE</span>

  <!--Close Box bottom-->
  <div id="bottomBorder">THERE IS NO TRY</div>
</div>

```

This is the closest I got, but you can guess it's not close enough.

This is how it looks (if you wonder, yes it's cut out)

I'd like it to be real tight, border-like, more or less in this dimensions (font-size)

I already tried changing properties from <span> to <div> to <p> with display changed from block, inline-flex/grid/block back and forth. Just as changing padding and margin values back and forth. Every other constellation got me to something like this:

Doesn't look bad but not what I want for now.

The only thing I found in search was this: How to create Border with text

And this answer: https://codepen.io/mrigankvallabh/pen/LYNYoMq

But first of all, I don't really get what is happening in the code (if someone is eager enough, feel free to explain :) And secondly, the parts I do understand show me it's a solution for this particular problem. Having a border around a paper, oriented rather on the outside, not the inside.

I read about fieldset and legend too, as well as moving text-blocks around on absolute onto a border with changing background but don't see an approach that would make this work, since there shall not be a line around the content.

And another thing, I wrote the solid border for the sides out of curiosity because the background (#bodyFormat - salmon) seems to stretch as wide as the text before transformation (rotation) would have been, if you catch my drift. But it looks like the box around the border text is shaped around content not consuming the space of rotation. Changing margins or width just shuffles everything again. (For width it changes exactly at 218px if you wonder too). How do I eliminate the background excess?

Answer 1

I was able to achieve what you're going for using CSS grid for layout, and wrapping the sides in p tags with position: absolute and setting parents' position: relative- to unlink the parent width from the length of the text. I also set a lot of things to display: flex to make centering content easier and changed all spans to divs for consistency.

Initial grid layout: It often helps to color-code things in these situations to make it more clear what's going on. This problem is totally solvable without using grid, but I find it makes it easier to conceptualize.

Here's a visual of why I wrapped the side text with p tags: As you can see, the whole div block is rotating, throwing off the layout of the grid.

So instead we make them child p elements, position them absolute, position parents relative, rotate, and voila:

(I should also point out that at this point I changed the grid layout a bit to make the top and bottom only in the center and left and right the full height, but it's the same idea.)

Now we just have to resize the bodyFormat div to taste and mess with the left and right distances of the p elements and everything should fall into place:

I should also note that I changed some font sizes to make everything big enough to work with and help it to fit together better, but feel free to tweak all of those numbers until it looks the way you want. The structure should hold up. I left the color-coding commented out, which should help with this.

#boxContent {
  font-size: 150px;
  font-weight: normal;
/*   background-color: green; */
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  height: .75em;
}

body {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

#bodyFormat {
  padding: 10px;
  background-color: salmon;
  width: 13em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.boxSides {
  display: flex;
  align-items: center;
  position: relative;
}

#LeftBorder {
  grid-column: 1;
  grid-row: 1 / 4;
/*   background-color: blue; */
}

#LeftBorder p {
  transform: rotate(-90deg);
/*   background: white; */
  position: absolute;
  width: 9em;
  left: -4em;
}

#RightBorder p {
  transform: rotate(90deg);
/*   background: white; */
  position: absolute;
  width: 9em;
  right: -4em;
}

#RightBorder {
  grid-column: 3;
  grid-row: 1 / 4;
/*   background-color: red; */
}
.topBorder {
  grid-column: 2;
  grid-row: 1;
/*   background-color: orange; */
}
#bottomBorder {
  grid-column: 2;
  grid-row: 3;
/*   background-color: yellow; */
}

<div id=bodyFormat>
  <!--Close Box top-->
  <div class="topBorder">DO OR DO NOT</div>

  <!--Close Box left side-->
  <div class="boxSides" id="LeftBorder"><p>BE WITH YOU</p></div>

  <!--Inside Box-->
  <div id="boxContent">NO</div>

  <!--Close Box right side-->
  <div class="boxSides" id="RightBorder"><p>MAY THE FORCE</p></div>

  <!--Close Box bottom-->
  <div id="bottomBorder">THERE IS NO TRY</div>
</div>