Как у DIV'a сделать косую линию внизу?

Question

[Сергей Шилов]

Мне надо, чтобы блок имел внизу косую сторону , как на картинке ниже.. Пытался вставить отдельный блок в самый низ и за счет отсутствия высоты и бордеров сделать, но не вышло.. Кто подскажет как сделать правильно?

Answer 1

[Анна Бакурова]

Сделайте треугольники через before и after для серого и желтого блока + поставьте им

position: relative; 
z-index: 1;

Как делать треугольники
Про before и after знаете?

Comments

[Сергей Шилов]

Конечно знаю, но, честно говоря, не вижу различия от того, что я пытался сделать, т.е. создал отдельный блок внизу и обозначил его через бордеры, как на статье в хабре

[Анна Бакурова]

@Olivoin лишние блоки в вёртске не нужны. А почему для Вас это не выход?

[Сергей Шилов]

@libris Если у блока ниже есть background, допустим, картинкой, то это не подходит, тк бордеру нельзя поставить бэк

[Анна Бакурова]

@Olivoin ну тогда только как тут через отступ и фон

[Виталий Киренков]

Какой бэк? Вешаете на блок с узорами афтер и бефор и следующий и предыдущий блоки просто заливаете цветом и всё... Максимум потом отрегулируете z-index-сом чтобы всё правильно друг на друга налазило...

[Анна Бакурова]

@DeLaVega ну Я тоже про это. Но бывает когда каждый фон с хаотичными узорами тогда как?

Answer 2

[Максим]

border-bottom: 2px red solid;