Как в 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:imagevg+xml base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NjAuMDAwMSAzNjQuNDU3Ij48cG9seWdvbiBwb2ludHM9IjE4Ni44MzYgMCAxNzkuMzMzIDAgMTMyLjE0MyAzNjQuNDU3IDY2MCAzNjQuNDU3IDY2MCAwIDE4Ni44MzYgMCIgZmlsbD0iI2FlMWExNyIvPjxwb2x5Z29uIHBvaW50cz0iMCAwIDAgMzY0LjQ1NyAxMzIuMTQzIDM2NC40NTcgMTc5LjMzMyAwIDAgMCIvPjwvc3ZnPg==') no-repeat center / cover }

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