Как сделать рамки с углами?

Question

[Артур Кудашев]

Здравствуйте, нужно сделать вот такую рамку:


Пока особо не могу понять как такое сделать.

Comments

[WapSter]

Очередной "Frontend Developer" не может справится с версткой.

[Никита]

WapSter, большинство из Frontend developer считают, что изучение CSS это бесполезная трата времени, ведь есть Bootstrap, я заметил, что это закономерно :)

[Артур Кудашев]

Никита Пурыга, кто вам сказал, что я этим не занимаюсь.

[Артур Кудашев]

WapSter, согласен с вами. В данным момент я не знаю как это реализовать, поэтому решил спросить. Может вы поможете, а не будите обсуждать мои знания?

[WapSter]

Артур Кудашев, svg маска, два блока с clip-path.

Answer 1

[Александр]

Когда spread-radius у filter: drop-shadow сделают, можно будет отказаться от хака через ::after

Comments

[Артур Кудашев]

Крутое решение, только clip-path печально работает в ie11.

Answer 2

[mipfikus]

Разбирайтесь:

Comments

[Артур Кудашев]

Такие треугольники я умею делать. Мой вопрос был больше про то как сделать ее прозрачной. В моем понимании это вряд ли получится сделать. У меня на странице есть фоновая картинка и у карточки стоит белый фоновый цвет. Если поставить рамке прозрачный цвет, то там будет фон карточки.

[Антон Литвиненко]

Ну это не совсем то, у него там паттерн бекграунда, который видно в этом месте

Answer 3

[Jan van Eyck]

Вариант выше не годится.
во 1х, Фон не монотонный - значит эта накладка будет выглядеть на нем именно как накладка (или костыль).
во 2х, Если добавить бордер, то становиться вообще все прискорбно.

Надо clip-path использовать. И кажется еще был какой-то вариант(ы).
В книге Леа Веру "Идеальные решения повседневных задач" описано, как подобное реализовать - читайте.