Как сделать скругление уголков по кривой Безье?

Question

[wadowad]

Здравствуйте!

Как сделать скругления уголков по кривой Безье? В графическом редакторе это делается элементарно. Но каким образом это можно сделать в вебе? Первый попавшийся пример с Dribbble:



Если Вы не видите разницу между скруглением по радиусу и этим, то это вопрос не для Вас.

Мои попытки заканчиваются на задании радиусов сразу парой значении для каждого уголка псевдоэлемента и выносе их (псевдоэлементов) за границы родительского элемента по горизонтали или вертикали. Всё конечно можно компенсировать, но это лишь имитация и подходит для маленьких уголков.

Если реально реализовать такое с помощью SVG, то как будет выглядеть код?

Answer 1

[RAX7]

При сплошном фоновом цвете хорошо работает border-image

При более сложных случаях - фон можно засунуть в SVG и там уже сделать маску, например как в этом примере.

Comments

[wadowad]

Офигенно! Благодарю!

Answer 2

[Артем Золин]

В свойство border-radius можно передать 8 значений, для каждой из сторон по два, например

border-radius: 10% 10% 10% 10% / 20% 20% 20% 20%

Визуально покликать можно тут 9elements.github.io

Comments

[wadowad]

Таким образом нельзя реализовать скругление по квадратичной функции с равными плечами.

P.S. У меня получается сымитировать наложением двух таких уголков - один от самого элемента второй от псевдоэлемента со смещением. Но возникает проблема в точке пересечения уголков - при большом масштабе виден косяк. Как решение подходит только для относительно маленьких радиусов. Выглядит так: