Как в CSS сверстать неровную фигуру?

Нужно сверстать вот такую фигуру, но не знаю как правильно это сделать. Делал квадрат и через before добавлял обрезанный border, но на разных разрешениях экранов он как будто "отклеивался".

Ответ

Первый вариант с градиентом: div { width: 500px; padding-bottom: 40%; max-width: 100%; background: #000; margin: 30px auto; border-top: 2px solid #000; background: linear-gradient(105deg, #000 0%, #000 25%, #ae0000 25%, #ae0000 100%); }

И более объемный с :before
div { position: relative; width: 500px; padding-bottom: 40%; max-width: 100%; background: #ae0000; margin: 30px auto; border-top: 2px solid #000; overflow: hidden; } div:before { content: ''; position: absolute; background: #000; width: 100%; height: 100%; right: 50%; transform: rotate(-80deg); -webkit-transform: rotate(-80deg); -moz-transform: rotate(-80deg); -o-transform: rotate(-80deg); -ms-transform: rotate(-80deg); }

И вариант с SVG фоном:
div { width: 500px; padding-bottom: 40%; max-width: 100%; margin: 30px auto; border-top: 2px solid #000; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NjAuMDAwMSAzNjQuNDU3Ij48cG9seWdvbiBwb2ludHM9IjE4Ni44MzYgMCAxNzkuMzMzIDAgMTMyLjE0MyAzNjQuNDU3IDY2MCAzNjQuNDU3IDY2MCAwIDE4Ni44MzYgMCIgZmlsbD0iI2FlMWExNyIvPjxwb2x5Z29uIHBvaW50cz0iMCAwIDAgMzY0LjQ1NyAxMzIuMTQzIDM2NC40NTcgMTc5LjMzMyAwIDAgMCIvPjwvc3ZnPg==') no-repeat center / cover; }

Для работы последнего варианта во всех браузерах необходимо перегнать SVG код через любой Base64 Encoder. Например, стиль такого вида:
background: url('data:image/svg+xml;utf8,') no-repeat center / cover;
Кодируем и заменяем, как в примере.