Рамка со скошенными углами на CSS: быть или не быть?

Question

[Дмитрий Логвиненко]

Можно ли максимально кроссплатформенно (но без динозавров) засиэсэсить такую рамку без мусорной разметки? Фон желательно иметь прозрачный. Или непрозрачный, но несовпадающий с цветом рамки.

Answer 1

[Maksim Zverev]

Можно использовать это решение: codepen.io/hilja/pen/rhlwG
Вложив 1 модуль в другой.

Answer 2

[Артём]

Статья по геом. фигурам. Посмотрите восмиугольник

Comments

[Дмитрий Логвиненко]

За счет того, что это делается широченным бордером (а нужная тонкая рамка), — не подходит, к сожалению.

[Артём]

@DmitryAnatolich, Ну тогда наверное svg как говорит @Trow_eu

Answer 3

[Trow_eu]

Для тонкой, скорее всего, придется использовать svg.

хотя... если фон вокруг рамки может быть однотонным, то можно попробовать толстым бордером по способу выше, одного цвета с окружающим фоном, а для тонкой рамки внутренюю тень сделать.

Answer 4

[Александр Зачиналов]

Уфф), только если разбить на три части, серцевина как простой блок + верхняя и нижняя шапки, с транзишном на правых.левых бордерах. Но это как-то объемно, проще на самом деле SVG использовать.