Как сделать бордер сложного контура?

Question

[mishapsv]

Есть элемент
dabblet.com/gist/2937c990d6bfad274740

Как бы вы сделали бордер по его контуру?
Я делал через псевдоэлемент на заднем плане такого же контура. Но получается несимметрично и в самом фоне есть зазоры.

Answer 1

[mishapsv]

Самому элементу задать
background-size: 75% 75%;
И добавить псевдоэлемент с теми же свойствами бэкграунда (только цвет другой)

position: absolute;
content: "";
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
z-index: -1;

Answer 2

[twobomb]

Может див в диве?

Comments

[mishapsv]

@twobomb


К сожалению, у вас тоже видны эти недостатки

[mishapsv]

(на обрезанных уголках разная толщина рамок)

[twobomb]

mishapsv: Может так

[mishapsv]

twobomb к сожалению, при изменении паддингов видны неточности по углам

[twobomb]

mishapsv: Используй svg

Answer 3

[galkan]

Зазоры можно убрать задавая background-size больше 50%

Answer 4

[Ankhena]

Без дополнительных блоков и псевдоэлементов
https://jsfiddle.net/1yh48obc/ толщину рамки еще поподгонять надо.

SVG, наверное, будет целесообразнее.