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

<div class="box" style="--b:3px;--c:10px">
  <div class="content">
    CONTENT<br> more Content
  </div>
</div>

<div class="box" style="--b:1px;--c:20px">
  <div class="content">
    AA BB
  </div>
</div>
<div class="box" style="--b:1px;--c:5px">
  <div class="content">
    AA BB
  </div>
</div>
.box {
  --b:2px;   /* border length*/
  --c:15px;  /* the cube perspective */
  
  --g:calc(var(--c)*0.707); /* 0.707 = cos(45deg) = sin(45deg) */
  margin: 10px;
  display: inline-block;
  padding:var(--b) var(--b) var(--c) var(--c);
  background:
    linear-gradient(-45deg,transparent var(--g),#cc0404 0) left   /var(--c) 100%,
    linear-gradient(135deg,transparent var(--g),red 0)     bottom /100% var(--c),
    linear-gradient(red,red)                               top    /100% var(--b),
    linear-gradient(red,red)                               right  /var(--b) 100%;
  background-repeat:no-repeat;
  clip-path: 
    polygon(0% calc(var(--c) - var(--b)), calc(var(--c) - var(--b)) 0%, 
    100% 0%, 
    100% calc(100% - var(--c) + var(--b)), calc(100% - var(--c) + var(--b)) 100%, 
    0% 100%);
    
}

.content {
  padding: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.