Кодовая модель HTML подразумевает, что divs всегда являются прямоугольниками. Однако вы можете получить очень приличный результат, используя некоторые методы. Самый простой - слишком использовать css, чтобы оттенять нужную часть вашего фона. Вы устанавливаете width
на более широкую сторону, а затем используете свойства border-left right и bottom для настройки фигуры. Например:
.myDiv {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
Вы можете видеть, что он работает здесь: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid В w3school также есть очень интересная страница с множеством форм, которые вы можете создать с помощью css. Проверьте это здесь: https://www.w3schools.com/howto/howto_css_shapes.asp