Вертикальный div с рисунком на левой и правой стороне - PullRequest
Новая
       65

Вертикальный div с рисунком на левой и правой стороне

0 голосов
/ 03 июля 2018

Так что я пытаюсь сделать div как этот enter image description here

Но я хочу, чтобы он был вертикальным, потому что я хочу, чтобы у div двух видов был похож стиль бумаги: это вертикальный div, и я хочу, чтобы случайные вьющиеся края сверху были слева и справа от ДИВ enter image description here На втором изображении вы видите голубую полоску. Я пытался сделать это с помощью 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));
}

Это граница, которую я пытаюсь использовать: enter image description here

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете вращать изображение с помощью любого инструмента, затем использовать его в качестве фона и полагаться на повтор: 

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);
}
...