How create panel with this border-image

Question

I'm creating a game and I'm starting with the UI, but I don't know how to build a panel with these assets inside HTML + CSS

I have the borders and the panel paper

I needed it to be this way and scalable according to the content and the size that is defined

so I tried with border-image:

.panel{
    position: absolute;
    border-image: url('../assets/border_left.png') 27 27 27 27 stretch stretch;
    border-width: 30px;
    border-style: solid;
    top: 30px;
    left: 30px;
    width: 500px;
    height: 500px;
}

but it only appeared on the left side and I don’t know how to put the paper inside afterwards

user_8620333 · Answer

I would do it this way:

.panel {
  width: 200px;
  height: 200px;
  position: relative;
  display:inline-block;
  overflow:hidden;
  background: url(https://i.stack.imgur.com/Eyjng.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;
   -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/JZJQz.png) no-repeat, 
    url(https://i.stack.imgur.com/6Y0R4.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;
}

How create panel with this border-image

1 Answers