Fragster
@Fragster
помогло? отметь решением!

Как использовать в clip-path: path() проценты (ну и calc)?

https://codepen.io/FragsterAt/pen/yLWvRGz

Нужно сделать так, чтобы размеры внутри clip-path: path("...") были относительными, чтобы обрезка растягивалась вместе с блоком (в примере - изменение размера с 20 на 40 пикселей).

Такое возможно сделать? На js я могу, конечно, менять строку, подставляя абсолютные величины при изменении размера, но очень не хочется. Да и прыгать, скорее всего, будет, некрасиво.
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Весь затык у нас тут в том, что CSS не позволяет в рамках path жонглировать единицами измерения. Почему? Люди задавались этим вопросом с самого момента появления path в CSS. Но этот функционал всегда был в SVG. Так что можно добавить маску в SVG (тут у нас размер элемента, условные 100% на 100%, считается за 1 на 1):

<svg width='0' height='0'>
    <defs>
        <clipPath id='example' clipPathUnits='objectBoundingBox'>
            <path d="M 0 0 a 1 1 0 0 0 1 1 h -1 v -1z"/>
        </clipPath>
    </defs>
</svg>

И тогда в CSS уже будет все просто:

.example {
    clip-path: url(#example);
}

Это не идеальный вариант, хотелось бы на чистом CSS, но имеем, что имеем.
Ответ написан
Ваш ответ на вопрос

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

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