Как сделать пятиугольный блок css?

Question

[Адель Халитов]

Как сделать подобный border у блока? Если можно примеры и насколько кроссбраузерно?

Answer 1

[Nwton]

https://jsfiddle.net/jp6ymc0s/1/

Answer 2

[Николай]

Предложенный выше метод не адаптивен, в данной реализации. Последний раз использовал: clip-path + svg, можно canvas.

Comments

[Адель Халитов]

Было бы круто еще ссылку на гуид какой нибудь

[Николай]

Адель Халитов: 1) Разобраться с осями в svg и описать значение точек для нужной фигуры. 2) вставить инлайново svg внутрь html. 3) присвоить id фигуре. 4) для родительского блока svg описать clip-path со значениями к примеру polygone(внутри точки), деля все значения точек твоего svg на 100.

[Николай]

Николай: по id сможешь обращаться к фигуре и clip-path чтобы был кросбраузерный внутри css указываем id. обращаться чтобы менять цвет и обводку.

[Николай]

Адель Халитов: на codedrop можешь найти страницу с готовыми разделителями, если не хочешь проходить описанный выше процесс. Инспектор кода и внимательность. к сожалению ссылку не могу указать, давно не использую.

[Ярослав Иванов]

Николай а clip-path не кросс-браузерный.

[Николай]

Ярослав Иванов: так svg будет отрабатывать везде где не будет работать clip-path