How to make a DIV with a crossed text. Type a text passing through a DIV

Question

Is there any way to transpose a text div, like coming in from one side and coming out from the other?

My idea would be something like these images. Where the text starts on one side and goes through inside of div. Is there any way to do this with CSS, and that I can change the text without having to mess with the CSS code to adapt every time I change the text?

OBS: It doesn’t have to look exactly like the pictures, it’s just to illustrate the idea.

Code model:

* {
    box-sizing: border-box;
}

.texto {
    /* border: 1px solid blue; */
    text-align: center;
    padding: 10px 0 10px 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 50%;
    perspective: 120px;
}
.texto span {
    display: inline-block;
    font-size: 50px;
    font-family: sans-serif;
    border: 6px solid red;
}

<div class="texto">
    <span>meu texto</span>
</div>

Answer 1

Playing a little with the example of @Andersoncarloswoss and making some modifications I got a result that seems to me "acceptable".

The only difference is I created one ::after to overlap the right edge and modified some units to adapt to the font size of the main element.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.teste {
  box-sizing: border-box;
  font-size: 3em;
  margin: 20px 10px;
  position: relative;
  z-index: 0;
}

.teste::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  left: 1.5em;
  top: -0.1em;
  height: 1.5em;
  width: 1.5em;
  border: 0.25em solid lightblue;
  z-index: -1;
  transform: perspective(120px) rotateY(-40deg);
}

.teste::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  left: 1.5em;
  top: -0.1em;
  height: 1.5em;
  width: 1.5em;
  border-right: 0.25em solid lightblue;
  transform: perspective(120px) rotateY(-40deg);
}

<div class="teste">Open English</div>
<div class="teste" style="font-size: 13px;">Open English</div>
<div class="teste" style="font-size: 18px;">Open English</div>

Answer 2

This form reproduces the Open English logo, but not exactly a text passing through the square, requiring changes¹ for this.

One way that comes very close is to apply the style to the element :before (or :after) of span, with perspective to give the dimensioning of the element:

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  font-weight: 800;
  font-size: 3em;
  position: relative;
}

span:before {
  content: '';
  width: 82px;
  height: 67px;
  border-top: 8px solid lightblue;
  border-right: 7px solid lightblue;
  border-bottom: 8px solid lightblue;
  border-left: 10px solid lightblue;
  transform: perspective(120px) rotateY(-40deg);
  position: absolute;
  left: 10px;
  top: -15px;
  z-index: -1;
}

<span>open english</span>

But, in this way, I ended up getting very plastered, because I ended up defining the measurements in the hand and, thus, if the font size or the element itself vary, will end up breaking the design.

---

1: These amendments I will try to make soon, but I leave the answer here even as an incentive to other responses.

Answer 3

I made an animated version, even made some adjustments with box-shadow, and an option closer than the Open English logo.

The tb technique is using pseudo-elements one with z-index -1 and with z-index 2 so one sits on top and the other under the text.

* {
    box-sizing: border-box;
}
body {
    background-color: rgb(248, 215, 255);
    height: 100%;
}

.texto {
    /* border: 1px solid blue; */
    text-align: center;
    padding: 10px 0 10px 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 40%;
    perspective: 120px;
}
.texto span {
    display: inline-block;
    font-size: 50px;
    font-family: sans-serif;
    position: relative;
    z-index: 1;
    width: 100%;
    white-space: nowrap;
    padding-left: 100%;
    text-shadow: 0 0 6px rgba(0,0,0,1);
    color: blueviolet;
    margin: 20px;
    animation: textox 5.5s linear infinite;
}
.texto::after, .texto::before {
    content: "";
    position: absolute;
    width: 100px;
    height: calc(100% - 36px);
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(-15deg);
}
.texto::after {
    
    border-left: 16px solid limegreen;
    z-index: -1;
    box-shadow: inset 0 0 5px black;
}
.texto::before {
    border-top: 6px solid limegreen;
    border-bottom: 6px solid limegreen;
    border-right: 16px solid limegreen;
    z-index: 2;
    box-shadow: 0 0 5px black, inset -5px 0px 5px -5px black;
}

@keyframes textox {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-200%, 0);
    }
}

<div class="texto">
    <span>meu texto</span>
</div>

Second model, now more similar to the Open English logo:

Follow the code with the animation:

* {
    box-sizing: border-box;
}
body {
    background-image: linear-gradient(gray, silver);
    background-repeat: no-repeat;
    height: 100%;
}

.texto {
    /* border: 1px solid blue; */
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 33%;
    perspective: 120px;
}
.texto span {
    display: inline-block;
    font-size: 50px;
    font-family: serif;
    font-weight: bold;
    position: relative;
    z-index: 1;
    width: 100%;
    white-space: nowrap;
    padding-left: 100%;
    margin: 20px;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
    animation: textox 6s linear infinite;
}
.texto::after, .texto::before {
    content: "";
    position: absolute;
    width: 100px;
    height: calc(100% - 36px);
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(-15deg);
}
.texto::after {
    height: 67%;
    width: 6px;
    left: calc(50% - 48px);
    background-image: linear-gradient(to bottom, blue 33%, transparent 33%, transparent 66%, blue 66%);
    z-index: -1;
}
.texto::before {
    border-top: 6px solid blue;
    border-bottom: 6px solid blue;
    border-right: 6px solid blue;
    z-index: 2;
}

@keyframes textox {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-200%, 0);
    }
}

<div class="texto">
    <span>meu texto</span>
</div>