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

Question

[godyesnow]

Как сверстать пятиугольник со скругленными краями?

Answer 1

[Eugene Chefranov]

Можно так

Comments

[godyesnow]

Спасибо большое!

[tema_sun]

Внутренние скругления потерялись =)

[Eugene Chefranov]

tema_sun, я думаю автору вопроса не составит труда подшаманить) главное что суть показана)

[Eugene Chefranov]

Подправил пример)

[Максим]

На мобиле не работает

[Eugene Chefranov]

Максим Ленский, открыл в Safari на iPhone и всё отлично работает)

[Максим]

Eugene Chefranov, в обычном андроиде в хроме ... буква г а не такая фигура

[Eugene Chefranov]

Максим Ленский, странно. у меня на телефоне в хроме выглядит так

Картинка

[Максим]

Eugene Chefranov,

[Eugene Chefranov]

Максим Ленский, очень странно, наверно к коду надо добавить вендорные префиксы и тогда станет норм

[Максим]

Eugene Chefranov, я ещё в автобусе ехал - и случайно увидел ..извеняюсь , я обычно на SVG делаю

Answer 2

[Anton fon Faust]

прямоугольник со скругленными углами и position не static, потом ::before и ::after с display:block и position: absolute, а для поворота применяйте transform: rotate и transform-origin

второй вариант: ::before со скругленными углами + skew (получаем ромбик) + position.

Comments

[godyesnow]

Спасибо большое!