Как сделать угл у блока с разным background через css?

Question

[Иван Смирнов]

Доброго времени суток)

Нужно сделать вот такой блок, чтобы у background блока был переход от белого до #aeb5c6 и тупой угл с border-color: #ecd06f, очень прошу помочь:

Comments

[Антон Иванов]

Угол то тупой

[Иван Смирнов]

Антон: тупанул, спасибо)

Answer 1

[Ivan Bogachev]

Можно совместить идею использования градиентов на ::before и ::after и старый хак с padding в процентах, чтобы получить универальную конструкцию, которая работает на любой ширине родительского элемента и при любом содержимом: codepen.

Также можно использовать calc для вычисления переходных точек этих градиентов (если вам нужно сохранять ширину полоски одинаковой при изменении ширины элемента), но нужно помнить про IE, который не очень это умеет, и в таком случае придется подставлять подпорку для него.