How to build the panel with these images

I'm trying to make a container with these images

Corner:

Side:

Back:

I need the container to look like this and also be able to put elements inside it normally as texts, divs all centered and responsive where I could change the width and height normally

---

I tried

.panel {              width: 250px;              height: 200px;              position: relative;              display: inline-block;              overflow: hidden;              background: url('https://i.stack.imgur.com/LwsWv.png') center/cover;              --g: transparent 12px, #fff 0;              -webkit-mask: linear-gradient( 135deg, var(--g)) 0 0, linear-gradient( 45deg, var(--g)) 0 100%, linear-gradient( -45deg, var(--g)) 100% 100%, linear-gradient(-135deg, var(--g)) 100% 0;              border-radius: 0px;              -webkit-mask-size: 51% 51%;              -webkit-mask-repeat: no-repeat;          }                    .panel::before, .panel::after, .panel i::before, .panel i::after {              content: "";              position: absolute;              background: url('https://i.stack.imgur.com/MgPjM.png') no-repeat, url('https://i.stack.imgur.com/RLeRJ.png') repeat-x;              width: 100vmax;              height: 64px;              transform-origin: top left;          }                    .panel::before {              top: 0;              left: 0;              z-index: 1;              width: calc(100% - 64px);          }                    .panel::after {              top: 0;              right: 0;              transform: translateX(100%) rotate(90deg);          }                    .panel i::before {              bottom: 0;              left: 0;              transform: translateY(100%) rotate(-90deg);          }                    .panel i::after {              bottom: 0;              right: 0;              transform: translate(100%, 100%) rotate(-180deg);              width: calc(100% - 64px);              z-index: 1;          }

<div class="panel"><i>test</i>test</div>

However the edges are strange and I can't center texts or any other element inside this container.

https://stackoverflow.com/questions/66791632/how-to-build-the-panel-with-these-images March 25, 2021 at 09:06AM