Как сверстать эту секцию?

Question

[Лобстер]

Здравствуйте есть вот такая вот секция:

Не могу понять как это сделать. Даже пример кода не могу показать так как не могу представить это

Comments

[Hyubert]

а что здесь сложного?

[Neyury]

Если вы про черную и белую полосы, и не требуется адаптивность, то просто сделайте картинкой

[Лобстер]

Hyubert: Я примеров в сети не нашел. белый скошенный прямоугольник я сделаю, а вот как сделать чёрную скошенную. Оно тут по бутстраповской сетке. Эта чёрная полоска выходит из колонки и и соединяется с белым прямоугольником. О_О короче мне это даже тяжело объяснить. Вообще не понимаю как это сдлать

[Лобстер]

Hyubert: Объясни мне дураку

[Александр Серый]

Смотрели transform: skew(); ?

[Лобстер]

theobroma: Да знаю я про это. Как это всё соеденить чтобы было адаптивным

[Ankhena]

Так, предположим, что будем плясать от середины:
белая: левый край на 50% ширины и наклон
черная: наклон, ширина calc 50% + хвостик чтобы достать до белой + компенсация на то чтобы убрать левый угол за окно браузера.

Либо расскажите какое задумано поведение при изменении ширины окна

[Лобстер]

Ankhena W: Ни малейшего понятия. Я сам нашел этот шаблон. Верстаю для себя. Впервые встретился с подобным. Я так понимаю его по сетке bootstrap сделать не выйдет. Нужно по старинке, но и текст который слева он получается как бы в col-md-6

[Ankhena]

Тостер: меня, если честно, довольно сильно бесит бутстрап и дизайны исключительно по сетке, поэтому в этой части вопроса не помогу :(

[Лобстер]

Ankhena W: О_о а как же Вы адаптивно верстаете? По старинке флоатами и медиа-запросами?

[Ankhena]

Тостер: флексами и медиазапросами.

Answer 1

[Олег]

Примерно так ;) https://jsfiddle.net/2c3w2ux2/
Позицирнирование сам поправишь в форме.

Comments

[Лобстер]

Спасибо огромное. Пока не буду отмечать решенным