html - 如何使用此边框图像创建面板

Question

我正在创建一个游戏，我从 UI 开始，但我不知道如何在 HTML + CSS 中使用这些 Assets 构建面板
我有边框和面板纸

我需要它是这种方式并根据定义的内容和大小进行扩展

所以我尝试使用 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" />

但是只出现在左边，之后不知道怎么把纸放进去

Answer 1

我会这样做:

.panel {
  width: 200px;
  height: 200px;
  position: relative;
  display:inline-block;
  overflow:hidden;
  background: url(/image/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(/image/JZJQz.png) no-repeat, 
    url(/image/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>