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

Question

Фёдор

css

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

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

19 июня 2024 г. 14:11

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для использования процентов и функции calc() в clip-path: path() вы можете использовать следующий синтаксис:

```css
clip-path: path('
    polygon(
        calc(50% - 10px) 0%,
        100% 50%,
        calc(50% - 10px) 100%,
        0% 50%
    )
');
```

В этом примере мы используем функцию calc(), чтобы вычислить размеры полигона в процентах с учетом пиксельного оффсета.

Чтобы сделать размеры внутри clip-path: path() относительными и динамическими, вы можете использовать переменные CSS. Например, вы можете создать переменные для хранения размеров и использовать их в clip-path: path():

```css
:root {
    --size: 20px;
}

.box {
    --size: 40px;
    clip-path: path('
        polygon(
            calc(50% - var(--size)) 0%,
            100% 50%,
            calc(50% - var(--size)) 100%,
            0% 50%
        )
    ');
}
```

Теперь вы можете изменить значение переменной --size в вашем CSS коде, чтобы динамически изменить размер обрезки без необходимости изменения JavaScript или скачков.

Надеюсь, это поможет вам решить вашу задачу!

Answer 2

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