Как добавить треугольную границу (по вертикали) относительно фонового изображения одной стороны? - PullRequest
Новая
       33

Как добавить треугольную границу (по вертикали) относительно фонового изображения одной стороны?

0 голосов
/ 21 мая 2018

У меня вертикальный баннер, созданный в CSS, и я хотел бы создать две зоны.

Разделение должно быть в форме треугольника.Одна сторона имеет фон, и «треугольная форма» должна сохранять этот фон.

Лучше объяснить на изображении; -)

enter image description here

Я собираюсь сделать это, но форма продолжается до конца ... и я застреваю. 

.box {
  background-image: 
    linear-gradient(195deg, transparent 70%, #000 70%, #000 71%, #fff 71%), 
    linear-gradient(165deg, transparent 70%, #000 70%, #000 71%, #fff 71%), 
    url(https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=2700&q=80);
  background-position: top, center;
  background-size: 250px 100%, cover;
  background-repeat: no-repeat;
}
<div class="box">
  some text here<br> more text
</div>

1 Ответ

0 голосов
/ 21 мая 2018

Вы можете настроить код следующим образом: 

.box {
  padding: 50px 30px;
  height:300px;
  width:100px;
  text-align: right;
  background-image:
    linear-gradient(200deg,transparent 70%,#000 70%,#000 71%,#fff 71%),
    linear-gradient(160deg,transparent 70%,#000 70%,#000 71%,#fff 71%),
    url(https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=2700&q=80);
  background-position:bottom left,bottom right,center;
  background-size:50% 600px,50% 600px,cover;
  background-repeat:no-repeat;
  
  display:flex;
  align-items:flex-end;
}
<div class="box">
  some text here<br> more text
</div>
...