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

Question

[lolka02]

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


https://codepen.io/akhur/pen/poNabPm нарисовал так, но рамки не плавные

Answer 1

[Арсений Матыцин]

SVG.

Comments

[lolka02]

будет ли адаптивная ширина в таком случае?

[Арсений Матыцин]

lolka02, если правильно подойдешь к решению, то да. Начать изучать с визуальными примерами можно отсюда css.yoksel.ru/svg-sizes.

Answer 2

[Максим]

https://codepen.io/topicstarter/pen/WNoMGBR вот так вроде

Comments

[lolka02]

а как теперь в ней написать ?)

[Максим]

lolka02, так же - по верх поставить тег <text x="" y="" font-size=""></text> и всё

[lolka02]

Много Чего, и боюсь не будет растягиваться по мере увеличения текста

[lolka02]

в ширину имею ввиду растягиваться

[Максим]

lolka02, по другому сделать очень сложно ...

Answer 3

[Дамир Шаниязов]

Как-то видел подобную штуку, там использовали ::after/before

Comments

[lolka02]

ну там через after/before не получится сделать углы border-radius и рамки , так же как у меня криво получится)