平面CSS 3d框

Question

我想要能够在CSS中创建的基本上是这个

理想情况下，文本可以像这样进入红色大框

然后，当有更多文本等时，它就会响应，因此轮廓边框变大或变小，但斜线保持不变。 蓝色圆圈部分应保持不变，但绿色轮廓应与盒子的宽度或高度相对应：

我让这支代码笔与另外5个div一起工作，但是任何adivce或帮助都很好。 https://codepen.io/gabezilla/pen/EGZxQy

  <div class="box">
  Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
  <div class="top-left-angle angle"></div>
  <div class="bottom-right-angle angle"></div>
  <div class="bottom-left-angle angle"></div>
  <div class="left-side"></div>
  <div class="bottom-side"></div>
</div>
<style>
.box{
  width:20%;
  padding:50px;
  color:white;
  background-size:100% 100%;
  margin:200px;
  position:relative;
}
.left-side,
.bottom-side,
.box,
.angle{
  background-color:green;
}
.angle{
  width:51px;
  height:4px;
  position:absolute;
  transform:rotate(-45deg);
}
.bottom-left-angle{
  left:-40px;
  bottom:-18px;
}    

.bottom-right-angle{
  bottom:-18px;
  right:-5px;
}    

.top-left-angle{
  left:-42px;
  top:18px;
}
.left-side{
  width:4px;
  height:100%;
  position:absolute;
  left:-35px;
  top:35px;
}
.bottom-side{
  width:100%;
  height:4px;
  position:absolute;
  bottom:-35px;
  left:-35px;
}
</style>