Возможен ли экспорт с Figma css clip-path?

Question

[Александр Варлаков]

Есть такая картинка:


Есть ли инструменты, плагины в фигме для генерации css clip-path?

Comments

[Виталий Першин]

Это больше похоже на трансформацию с 3д эффектом

[imko]

Виталий Першин, который еще и в родителе этого слоя указан)

[Александр Варлаков]

imko, похож, но не трансформация. С трансформацией пробовал экспериментировать - не то. Самое и плохое в этом всем- 1. нет связи с дизайнером, 2. Гуглу не могу сформулировать что мне надо, сейчас видос сделаю, как оно делается

[Александр Варлаков]

imko, https://disk.yandex.ru/i/Y-THaxigtC8nsQ

[Александр Варлаков]

Виталий Першин, похож, но не трансформация - изображение относительно плоскости экрана остается неизменным. С трансформацией пробовал экспериментировать - не то. Самое и плохое в этом всем- 1. нет связи с дизайнером, 2. Гуглу не могу сформулировать что мне надо, сейчас видос сделаю, как оно делается

[imko]

Александр Варлаков, ну может и экспортнешь его так?

[imko]

Александр Варлаков, а почему вообще у тебя права редактирования если ты не дизайнер?

[Александр Варлаков]

imko, Вооооооооооот, тут то самое интересное. Верстаю макет, потом он будет на wordpress натягиваться, картинки повторяющиеся - 3 картинки на 9 блоков только обрезаны по разному, т. е. они будут и должны меняться по по желанию заказчика

[Александр Варлаков]

imko, а потому что взял и скопировал для "своих целей", иначе как бы я видео снял. Я плохо знаю фигму, только основы - то что нужно для верстки, но все же знаю

[Максим]

Александр Варлаков, в css вроде есть такое свойство

[Александр Варлаков]

Brasileiro, к сожалению нет

[Александр Варлаков]

Виталий Першин, если долго мучится - что-нибудь получится. Ручкой обвел контур, да в svg контур экспортировал, svп сделал clip-path

[Александр Варлаков]

imko, если долго мучится - что-нибудь получится. Ручкой обвел контур, да в svg контур экспортировал, svп сделал clip-path

Answer 1

[Александр Варлаков]

Отвечаю сам себе. И еще может быть кому пригодится...
Обвел контур ручкой, контур экспортировал в svg.

<svg height="0" width="0" >
        <defs>
            <clipPath id="franchiseTop" clipPathUnits="objectBoundingBox" transform="scale(0.001964, 0.002564)">
                <path d="M69.5 6.5L67.5 10.5L65 19.5L63.5 26L62 33L60 41.5L57.5 53.5L55.5 63.5L53.5 71.5L52.5 76L51.5 81.5L49 92L46.5 104L45 111.5L42.5 121.5L41 129L39 137.5L37.5 144.5L36 152L33.5 163.5L30 178.5L28.5 186.5L25 202L23.5 208.5L20 226L16.5 241.5L13.5 255.5L9.5 273.5L5.5 290.5L3 302L2 307L1 311.5V315.5V319.5L3 328L6 333L7.5 335L11 338.5L13.5 340.5L15.5 342L17.5 343L19.5 344L25 345.5L79.5 351L159 358.5L215.5 364L244 367L286.5 371L296.5 372L346 376.5L404.5 382.5L427 384.5L447.5 386.5L460.5 388L471 389L477.5 389.5H482L486 388.5L491 386.5L496.5 383.5L502.5 377.5L505.5 372L507.5 367L508 362.5V357L507 324.5L506 292L505 260L504 228L503 200L502.5 179.5V162L502 145.5L501 122L500.5 104.5L500 90L499.5 77.5L499 66.5V63V52L498.5 40.5L498 28L497.5 16.5L497 10.5L496.5 7L495.5 3.5L494.5 1.5L494 1L493.5 0.5H285H183.5H80.5H76L74 1L72.5 2.5L69.5 6.5Z"/>
            </clipPath>
        </defs>
    </svg>

В svg применил трансформацию для масштабирования: transform: scale(1 / ширина , 1 / высота)
transform="scale(0.001964, 0.002564)"

Ну и css:

object-fit: cover;
clip-path: url(#franchiseTop);

И получили в результате адаптивный clip-path