[Помогите] Блок с треугольником сбоку

Попробовал указать схематично: http://joxi.ru/4AkebBBFydyg4m
Имеется 2 блока: слева картинка, справа информационный блок или форма - левая часть его должна быть в форме треугольника, чтобы при сведении она как-бы наезжала на левую часть.
Пробовал border сделать но что-то полная фигня получилось. Или нужно не border использовать, а как-то иначе реализовать?

 

Либо может изначально правому блоку нужно сделать фигуру в виде трапеции, просто с одной прямой стороной?

 

Вопрос решил, путем добавления в блок треугольника таким образом:

<div class="col-xl-1 triangle"></div>

Код:

.triangle {
    height: 0;
    border-style: solid;
    border-width: 0 0 660px 200px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    right: -1px;
    width: 0;
}