Как создать панель с этим border-image

Question

Я создаю игру и начинаю с пользовательского интерфейса, но я не знаю, как создать панель с этими изображениями внутри HTML + CSS.

У меня есть границы и панно:

Мне нужно, чтобы панель была такой и при этом масштабируемой, в соответствии с содержанием и размерами, которые определены.

Я попробовал с 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;
}

<div className="panel" />

но он появился только с левой стороны, и я не знаю, как потом класть бумагу внутрь

_{Свободный перевод вопроса How create panel with this border-image от участника @Slinidy.}

Answer 1

Я бы сделал это так:

.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;
}

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

<div class="panel" style="height:100px;">
  <i></i>
</div>

<div class="panel" style="width:100px;">
  <i></i>
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Как создать панель с этим border-image

Ответы (1 шт):