Как свверстать блок с триугольниками как на фото????

Question

[Максим Приходько]

В верстке использую bootstrap сетку, слева content сверстан, а вот триугольники не могу сделать, помогите пожалуйста их сделать....

Answer 1

[Денис Белевцов]

Используй градиент для фона. Прочитай "Леа Веру - Секреты CSS" 5 главу. Пример на JSFiddle

Answer 2

[Алексей Скляров]

Создаете треугольник (выше уже написано как делать), через :after,:before задаете абсолютное позиционирование: bottom:0px;right:0px; и все.

Answer 3

[Максим Приходько]

Вот что получается, нужно что бы как на макете, а не по ширене сетки bootstrap...Прошу помощи!!!

Comments

[Руслан Полин]

Код в песочницу залейте, чтобы видеть.

[Алексей Скляров]

Руслан: если такие вопросы задаются, скорее всего человек не знает что это такое

[Руслан Полин]

Алексей Скляров: Да, что-то я погорячился. Не удивлюсь, если человек тащит весь бутстрап в лендинг, лишь ради сетки.
Максим Приходько: было бы неплохо, если бы в теги вопроса добавили Bootstrap.

[Максим Приходько]

Руслан: я так понял лучше етот блок сделать без сетки bootstrapa?

[Максим Приходько]

Тогда и треугольнику станут как положено, а адаптивность через media запросы прописать

[Руслан Полин]

Максим Приходько: Возможно сделать и с бутстрапом, наверно. Вы покажите разметку и вам найдут решение. Чтобы говорить в слепую, как лучше - нужно быть экстрасенсом. Попробуйте убрать отступы к примеру. Так, чтобы блоки в плотную к друг-другу легли.

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

<div class="row no-gutter">
    <div class="col-md-6">
        ...
    </div>
    <div class="col-md-6">
        ...
    </div>
</div>