Как лучше сверстать многоугольник как здесь?

Question

[Виталий]

Приветствую! Снова обращаюсь за советом :) Подскажите как лучше сверстать блок в виде неправильного многоугольника (или как там его...):
Конечно можно сделать просто беграундом, но "чует мое серце" не по феншую это, как ваше мнение, как бы вы сверстали такое. Спасибо!

Answer 1

[Максим]

SVG самое лучшее средство для этих целей

Answer 2

[twobomb]

Можно так

Comments

[dom1n1k]

Нет, так нельзя.

[dom1n1k]

Нельзя!
Тот метод имитирует многоугольник, но не создает реального шейпа. И cтало быть:
- от фигуры нельзя отбросить тень;
- в ней нельзя сделать отсечение внутренних элементов (белая полоска внизу);
- ей нельзя задать рамку;
- в ней нельзя нормально сделать бекграунд;
- в ней очень неудобно делать позиционирование;
- её очень неудобно модифицировать и поддерживать.

Вообще, я бы отбивал руки за использование тех выкрутасов (звезды, многоугольники) в реальных проектах. Та статья рассказывает о прикольных головоломках и служит больше для развития общего кругозора! А не для промышленного применения.

[twobomb]

dom1n1k, свг вам в помощь

Answer 3

[maxfox]

Используйте transform: skew() для ::before элемента вашего контейнера. Это позволит избежать трансформации вложенных элементов.
Ну или SVG, но с transform кода меньше.

Answer 4

[Петя Персианов]

https://codepen.io/Persianov_Petr/pen/yzPjxK
вот так вот