Инвертированный радиус границы — магия кривых с помощью одного лишь CSS!

Применяйте внутри контейнеров мой простой метод, который даёт вам полный контроль и легко настраивается для @media или различных представлений. Проявите креативность! CSS: *, *::before, *::after {box-sizing: border-box;} [class^="invert"], [class^="invert"]::before{ backface-visibility: hidden; transform: translateZ(0) translate(0, 0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; will-change: transform, clip-path;} [class^="invert"] {clip-path: inset(0); will-change: transform, clip-path;} .invert-1::before { BORDER-RADIUS: 25px 0px 0px 25px; content: ''; position: absolute; фоновый цвет: прозрачный; box-shadow: 0 0 0 50 пикселей #FFF, 0 0 0 0 #FFF; pointer-events: none; clip-path: inset(0);} .invert-3::before { BORDER-RADIUS: 0 пикселей 25 пикселей 0 пикселей 0 пикселей; content: ''; position: absolute; background-color: transparent; box-shadow: 0 0 0 50 пикселей #FFF, 0 0 0 0 #FFF; pointer-events: none; clip-path: inset(0);} .invert-4 { BORDER-RADIUS: 0 0 0 25 пикселей; BACKGROUND-COLOR: #FFF; will-change: transform, clip-path;} @media only screen and (max-width: 500px) { .invert-4 { BORDER-RADIUS: 0 0 0 20px; BACKGROUND-COLOR: #FFF; will-change: transform, clip-path;} } .invert-6::before { BORDER-RADIUS: 0px 25px 25px 0px; content: ''; position: absolute; background-color: transparent; box-shadow: 0 0 0 50px #FFF, 0 0 0 0 #FFF; pointer-events: none; clip-path: inset(0);} Пройдите наш курс по созданию сайтов на Elementor: https://learn.websquadron.co.uk 👉 Приобретите наши бизнес-пакеты за $1: https://learn.websquadron.co.uk/#packs 👉 Хостинг на WordPress: https://be.elementor.com/visit/?bta=2... 👉 Профессиональный конструктор страниц: https://be.elementor.com/visit/?bta=2... Нужна личная поддержка: https://learn.websquadron.co.uk/#support Присоединяйтесь к нашей группе в Facebook:   / websquadron   Получить Code Snippets Pro: https://r.freemius.com/10565/3304295/