html - 一个垂直的 div，左右两边都有一个图像模式

Question

所以我正在尝试制作这样的 div

但我希望它是垂直的，因为我希望 div 有两种像纸一样的外观：这是垂直 div，我希望上面的随机卷曲边缘位于 div 的左侧和 右侧第二张图片你看到一个蓝色的边框。我尝试使用边框图像来做到这一点，但这似乎并没有真正起作用，因为我尝试使用的边框图像的随机模式。

我现在拥有的CSS：

bg-section {
border-image: url(../images/test.png) 120 round;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
width: 70%;
margin: auto;
linear-gradient(rgba(199,194,183,0.2), rgba(199,194,183,0));
}

这是我尝试使用的边框：

Answer 1

您可以使用任何工具旋转图像，然后将其用作背景并依靠重复：

body {
  min-height:800vh;
  margin:0;
  background:
    url(https://i.stack.imgur.com/rFPJV.png) right repeat-y,
    url(https://i.stack.imgur.com/uMYNC.png) left repeat-y,
    linear-gradient(green,green) center / calc(100% - 138px) 100% no-repeat;
    
}

使用相同的图像，您可以使用伪元素并依靠变换来旋转图像。您还可以轻松控制边框的宽度：

body {
  min-height:800vh;
  margin:0;
  position:relative;  
  background:linear-gradient(green,green) center / calc(100% - 50px) 100% no-repeat
}
body:before,
body:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:20px; /*Control the width of the border*/
  background: url(https://i.stack.imgur.com/rFPJV.png) center/contain  repeat-y
}
body:before {
  right:10px;
}
body:after {
  left:10px;
  transform:scale(-1,1);
}