Как сделать кнопку с порваным верхним бордером?

Question

[Полина Емельянова]

Добрый день, коллеги.
Прошу вас помочь мне сделать кнопку, как показано на фото


Порванный ближе к правому углу верхний бордер при монолитном общем.

УСЛОВИЯ:
Никаких дополнительных вложенных элементов быть не должно. Только CSS.

ПРОСЬБА
Никаких ответов из 3 слов, типа "юзай SVG". Сразу жалоба. Благодарю, за понимание.

Заранее БЛАГОДАРЮ за помощь.
Если такой вопрос уже описывался - прошу дайте ссылку на него.

Answer 1

[Ankhena]

Если непрозрачная, то белыми псевдоэлемнтами.
Если прозрачная, то верхняя граница это не граница, а фоновый градиент в 1 точку высотой.

Comments

[Полина Емельянова]

ОТМЕННАЯ ИДЕЯ!!!!!
Позвольте я ее опробую и отпишусь

[Ankhena]

Полина Емельянова, https://jsfiddle.net/bw42rugo/

[Полина Емельянова]

Ankhena, https://codepen.io/emelyanova/pen/OdXybb
толлько границы не четкие. Я поймать их не могу.....

[Ankhena]

Полина Емельянова, разные браузеры по разному округляют проценты. Можно пробовать делать точки не 10px - 10px, а 10 и 11.

Там все промежутки от ширины зависят, на четкие px не заменить?

На моем мониторе и при моем зрении нечеткости не видно.
Даже увеличенный скрин:


Более умного решения не придумала.