CSS 边框图像 : rendering a frame by rotating an image

Question

我需要通过旋转图像来渲染框架(即图片周围的相框):

• 左边0度
• 90 分最高
• ...等等。

据我所知，没有 border-image-left|right|top|bottom 属性，尽管这也可以 - 如果我错了请纠正我。

看来我需要使用 border-image 属性。有谁知道是否可以根据侧面旋转图像？

我想其他乱七八糟的选项应该包括

• 围绕图像创建四个 div
• 手动生成边框图像(这不会真正起作用，因为 1. 我们有 300 多张图像，并且 2. 框架需要用于具有不同纵横比的图像...)

编辑:“取决于侧面”= 左侧为 0 度，顶部为 90 度，右侧为 180 度，底部为 240 度...请参见下图的示例。

Left hand border image

Answer 1

部分强制，但将其包装在 div 和 span 中并使用伪元素和转换似乎有效。 图像包裹在 .img-container div 和一个 span 中，::before 和 ::after 元素绝对定位在周围图片。

这是标记:

<div class="img-container">
  <span>
    <img src="https://unsplash.it/300/300?image=200">
  </span>
</div>

还有样式:

.img-container, span, img{
  display: block;
  position: relative;
}

/* Image border general */
.img-container::before,
.img-container::after,
span::before, span::after{
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 30px;
  height: 100%;
  transform: translateY(-50%);
  background-image: url("/image/0UI1w.png");
  background-size: 100% 100%;
  z-index: 2;
}

/* Specific to the right border */
.img-container::after{
  left: auto;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

/* Top and bottom border general */
span::before,
span::after{
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Just the bottom */
span::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(270deg);
}

可能有点多

这是一个 fiddle