左侧和右侧带有图像图案的垂直div

Question

所以我正在尝试像这样制作一个div

但是我希望它是垂直的，因为我希望两种div都具有类似于纸张样式的外观：这是垂直的div，并且我希望从上方开始的随机卷曲边缘位于对象的左侧和右侧。 div 在第二张图像上，您看到一个蓝色的怪异边框。我尝试使用border-image进行此操作，但是由于我要使用的border image的随机图案，因此这似乎并没有奏效。

我现在拥有的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);
}