如何在半Flex布局容器中使用旋转重复背景图解决元素垂直边框适配问题？

我想要为元素创建精美的边框，但垂直线条的实现遇到了问题：

• 示例中右侧边框显示正常，但仅适配特定尺寸，且据我所知无法用calc()根据高度计算宽度；
• 我不想为垂直线条单独使用另一张图片，但如果没有其他方案也可以接受；
• 我并非执着于当前方案，但这是我能想到的唯一方法。

原实现代码 #

CSS #

.block
{
    position: relative;
    width: 400px;
    height: 200px;
    margin: auto;
    background-color: silver;
}
.border
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.corner
{
    width: 16px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA1LjEuN4vW9zkAAAC2ZVhJZklJKgAIAAAABQAaAQUAAQAAAEoAAAAbAQUAAQAAAFIAAAAoAQMAAQAAAAIAAAAxAQIAEAAAAFoAAABphwQAAQAAAGoAAAAAAAAAYAAAAAEAAABgAAAAAQAAAFBhaW50Lk5FVCA1LjEuNwADAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAWgBAABAAAAlAAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAAAlR56NozS1xQAAAFRJREFUOE+1kkEOABAMBNX//8xNlgwNrUkcumTTbllh2ioIpkXV4gXPwOQgnsEzzclhYPBQNbqfSBmB2iUNuekATXcGx9UpbkhA7k/8BgZGhEcIG3SUNQ8QLldnBgAAAABJRU5ErkJggg==');
}
.ne { transform: rotate(90deg); }
.se { transform: rotate(180deg); }
.sw { transform: rotate(270deg); }
.edge
{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA1LjEuN4vW9zkAAAC2ZVhJZklJKgAIAAAABQAaAQUAAQAAAEoAAAAbAQUAAQAAAFIAAAAoAQMAAQAAAAIAAAAxAQIAEAAAAFoAAABphwQAAQAAAGoAAAAAAAAAYAAAAAEAAABgAAAAAQAAAFBhaW50Lk5FVCA1LjEuNwADAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAWgBAABAAAAlAAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAAAlR56NozS1xQAAAB9JREFUOE9jYBgFFANGBgaG/+iCpAAmdIFRMAoGBAAA0EYBA3ATNTsAAAAASUVORK5CYII=');
    background-repeat: repeat-x;
}
.n { flex-grow: 1; }
.e { transform: rotate(90deg); background-repeat: repeat-y; }
.s { flex-grow: 1; transform: rotate(180deg); }
.w { transform: rotate(270deg); background-repeat: repeat-x;};

HTML #

<div class="block">
    <div class="border" style="display:flex; flex-direction: column">
        <div style="height: 16px; display:flex; flex-direction: row;">
            <div class="corner nw"></div>
            <div class="edge n"></div>
            <div class="corner ne"></div>
        </div>
        <div style="flex-grow: 1; display:flex; flex-direction: row;">
            <div class="edge w" style="background-color: #ffff0015; height: 16px; width: 168px; position:relative; top: 76px; right:76px"></div>
            <div style="flex-grow: 1;"></div>
            <div class="edge e" style="background-color: #ff000015; width: 16px;"></div>
        </div>
        <div style="height: 16px; display:flex; flex-direction: row;">
            <div class="corner sw"></div>
            <div class="edge s"></div>
            <div class="corner se"></div>
        </div>
    </div>
    <div style="padding: 12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

解决方案 #

方案1：用CSS border-image 实现（单图适配任意尺寸） #

这是最省心的方案，只用一张包含四个角和四条边的九宫格图，就能自动适配任意元素尺寸，不需要拆分边角和边。

假设你的边框图是标准九宫格（四个角16x16，边可拉伸），直接这样写：

.block {
  position: relative;
  width: 400px;
  height: 200px;
  margin: auto;
  background-color: silver;
  /* 关键代码 */
  border: 16px solid transparent;
  border-image: url('你的边框九宫格图片地址') 16 stretch;
}

• 16 对应九宫格的切片大小（和你的角尺寸一致）
• stretch 表示边会拉伸适配元素尺寸，若边是纹理图案，也可以用repeat重复
• 不需要额外嵌套div，直接给目标元素加样式，完全适配动态尺寸。

方案2：修正现有flex布局的垂直边问题 #

如果坚持用拆分边角的方式，调整CSS和布局让垂直边自动适配高度：

.border {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 中间行占满上下角间的剩余高度 */
.border-middle-row {
  flex: 1;
  display: flex;
  flex-direction: row;
}
/* 左右边固定宽度，高度100% */
.edge.w, .edge.e {
  width: 16px;
  height: 100%;
  background-repeat: repeat-y;
}
/* 左边用原水平边图旋转，调整定位适配 */
.edge.w {
  transform: rotate(270deg);
  transform-origin: top left;
  width: calc(100% - 32px);
  position: relative;
  left: 16px;
}

对应的HTML中间行调整为：

<div class="border-middle-row">
  <div class="edge w"></div>
  <div style="flex: 1;"></div>
  <div class="edge e"></div>
</div>

这样左右边会自动占满上下角之间的高度，无需手动设置宽高和定位值。

方案3：用CSS变量+calc()动态计算尺寸 #

如果要保留现有结构，用CSS变量存储元素尺寸，动态计算垂直边参数：

.block {
  --block-height: 200px;
  position: relative;
  width: 400px;
  height: var(--block-height);
  margin: auto;
  background-color: silver;
}
.edge.w {
  width: calc(var(--block-height) - 32px); /* 高度减去两个角的总高度（16*2） */
  top: 16px;
  right: 0;
  /* 其他样式保持 */
}

修改.block的--block-height变量时，左边框会自动适配新高度。

内容的提问来源于stack exchange，提问作者Kempeth