Как это можно реализовать с помощью clip-path?

Question

[LOLIK777]

Не могу сделать стороны(бока) с таким радиусом, получаются только острые. Подскажите, пожалуйста...

Answer 1

[Nikita-Fast]

<svg  version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
 <path transform="matrix(.73872 .67401 -.66417 .74758 0 0)" d="m157.42 35.068c11.576 1.8703 23.076 1.7628 33.532-2.9604-4.8792 14.896-5.7412 28.726-0.88931 41.041-11.052-4.0573-21.8-2.0324-32.244 0.36896 4.3409-10.936 5.5631-24.43-0.39881-38.449z" fill="#a7c6cf"  stroke="#49c2f4"  stroke-width="2"/>
</svg>

create new plain text document and rename it in file.svg and open Google Chrome

preview : https://jsfiddle.net/pqbyzn3L/

Comments

[LOLIK777]

Спасибо за ответ. Но проблема в том что меня интересует именно clip-path. Если вставлять этот svg между блоками как соединяющий элемент начинаются проблемы с адаптивностью(

[Nikita-Fast]

LOLIK777, у SVG проблемы с адаптивностью ? Вы что то путаете

[LOLIK777]

У меня не получается реализовать нормальный размер используя svg.

[Nikita-Fast]

LOLIK777, покажите весь скриншот того что надо сделать

[LOLIK777]

Nikita-Fast, вот: skrinshoter.ru/s/171018/FDsyDZVU?a

[Nikita-Fast]

LOLIK777, это можно на svg сделать а текст на html тегах - не сложно вроде бы

[LOLIK777]

Nikita-Fast, если использовать svg даже при размере в 500px картинка маленькая, как видно со скриншота: skrinshoter.ru/s/171018/YQqp9S13?a
Или размеры этого svg можно изменить иным путем?

[Nikita-Fast]

LOLIK777, ммм...viewBox занимается масштабированием svg ммм но рассказывать действительно много ...если хотите быть в тренде и что бы ваш продукт одинаково смотрелся везде - надо использовать SVG

[LOLIK777]

Nikita-Fast, спасибо за оказанную помощь.

[Nikita-Fast]

LOLIK777, вот скажем смотри - не сложно просто долго : https://jsfiddle.net/61vgtdLx/ я не накладывал маски и фильтры

[LOLIK777]

Nikita-Fast, ого... как такое получилось? и так быстро...через какую программу?

[Nikita-Fast]

LOLIK777, в инкскайпе делаю или корел драв

[LOLIK777]

Nikita-Fast, спасибо!! Буду вникать.

[Nikita-Fast]

LOLIK777, да там открыл и тупо видишь что делаешь и потом сохраняешь как SVG и все дела ...