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

Есть такая картинка:
619be1caac92e982093340.jpeg

Есть ли инструменты, плагины в фигме для генерации css clip-path?
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
AlexandrVV86
@AlexandrVV86 Автор вопроса
Отвечаю сам себе. И еще может быть кому пригодится...
Обвел контур ручкой, контур экспортировал в 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
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы