responsive design - How to create cube window with css?

Question

I found this image online and tryed to create these boxes with css. I failed. Has anyone an idea how to solve this problem?

This is my code. The problem is the left bar:

.box {
  position: relative;
  margin: 10px;
  display: inline-block;
}

.content {
  border-top: 2px solid red;
  border-right: 2px solid red;
  padding: 5px;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  height: 100%;
  width: 10px;
  background-color: red;
  transform: skew(-45deg) rotate(-45deg);
}

.box:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -5px;
  height: 10px;
  width: 100%;
  background-color: red;
  transform: skew(-45deg);
}

<div class="box">
  <div class="content">
  CONTENT<br />
  Some more content
  </div>
</div>

Answer 1

border-image with linear-gradient can do it:

.box {
  margin: 10px;
  display: inline-block;
  border-style:solid;
  border-width:2px 2px 15px 15px;
  border-image-slice:2 2 15 15; /* same as border-width*/
  border-image-source:linear-gradient(-45deg,transparent 9px,red 0 calc(100% - 9px),transparent 0);
}

.content {
  padding: 5px;
}

<div class="box">
  <div class="content">
    CONTENT<br> Some more Content
  </div>
</div>

<div class="box">
  <div class="content">
    CONTENT<br> more Content
  </div>
</div>

<div class="box">
  <div class="content">
    AA BB
  </div>
</div>