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

Question

[Антон Антон]

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

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

Такое возможно сделать? На js я могу, конечно, менять строку, подставляя абсолютные величины при изменении размера, но очень не хочется. Да и прыгать, скорее всего, будет, некрасиво.

Comments

[Roman]

Не понял вопрос, но если не понятно как работать в clip-path с calc то

clip-path: path("M0 0, calc(50% / 2) 0, calc(50% / 2) calc(30% / 2), 0 calc(30% / 2)");

[Антон Антон]

Roman, не работает так (или я что-то не правильно делаю), добавил в пример вариант не с % а с calc. в инспекторе пишет - некорректное значение свойства.

Answer 1

[Ivan Bogachev]

Весь затык у нас тут в том, что 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, но имеем, что имеем.

Comments

[Антон Антон]

а для условных calc(100% - 20px) есть варианты?

[xdevelx]

Антон Антон, А кто мешает использовать css маски, у которых есть и размер, и position? В более сложных случаях с масками можно и композицию задействовать, если надо чтобы какая то часть фиксировано обрезалась а остальное тянулось.

[Ivan Bogachev]

Антон Антон, в изначальном вопросе этого не было, но тут верно подсказывают, что если у вас действительно какие-то хитрые обстоятельства вырисовываются, то имеет смысл забить на clip, и взять уже полноценные маски. С ними можно будет накрутить все, что угодно. В рамках clip-path тут разве что размер самого элемента менять. Сработать может, но удобства становится еще меньше.

[Антон Антон]

xdevelx, Ivan Bogachev, А разве маски умеют сделать что-то типа "начать от (100% - 20 пикселей) и оттуда сделать загругление в 20 пикселей"?

по поводу вопроса - calc вынесен прям в заголовок.

[Ivan Bogachev]

Антон Антон, У масок есть свойства mask-size, mask-position, там много всего начинается с mask-*. С их помощью можно маску растягивать по-всякому. Там любые calc поддерживаются.

[Антон Антон]

Ivan Bogachev, Там сама маска должна тянуться частично, как-то так:

зеленым - фиксированные размеры, красным - растягиваемые

[xdevelx]

Антон Антон, Маски mask-image могут быть множественные как и background-image. К примеру 4 фиксированного размера - через mask-position. И одна с адаптивными размерами. Возможно придётся применять mask-composite. Можно и одной маской сделать, но при изменении ширины и высоты элемента пропорции углов будут меняться, что может не устроить.

[xdevelx]

Антон Антон, И здесь судя по рисунку может подойти вполне border-image. С ним как раз углы фиксированные будут а части между углами растягиваются.

[Антон Антон]

xdevelx, ну оно должно картинку с содержимым фигурно обрезать, чтобы из под неё фон выглядывал

[xdevelx]

Антон Антон, Ну тогда только остаётся множественный mask-image