Używanie funkcji shape() do elastycznego przycinania

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Noam Rosenthal

Data publikacji: 8 kwietnia 2025 r.

Właściwość clip-path pozwala zmienić kształt elementu, przycinając go do koła, wielokąta, a nawet ścieżki SVG. Przed wersją Chrome 135 i Safari 18.4 trzeba było jednak wybierać między responsywnymi wielokątami a bardziej złożonymi kształtami, które nie są responsywne i korzystają z ścieżek SVG. Dzięki nowej funkcji shape() element clip-path może przyciąć element do kształtu niebędącego wielokątem, który jest też elastyczny.

Tworzenie kształtu flagi

Porównaj na przykład tworzenie kształtu flagi za pomocą narzędzi clip-path: path() i clip-path: shape().

Kształt flagi nie jest dokładnie wielokątem, ponieważ jego górna i dolna krawędź to krzywe Béziera trzeciego stopnia, a nie proste linie lub zaokrąglone rogi.

Utwórz flagę za pomocą clip-path: path()

Kształt taki jak ta flaga można przedstawić za pomocą ścieżki SVG:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

Ścieżka SVG to seria poleceń ścieżki:

1. Przejdź do 0, 20.
2. Zakrzywizowanie do 100, 20 z użyciem punktów kontrolnych (25,0 i 75, 40).
3. Linia pionowa do 80.
4. Zakrzywizna do 0, 80, przy użyciu punktów kontrolnych (75,100 i 25,50).
5. Zamknij ścieżkę (linia do 0,20).

Rysuje kształt flagi, ale wszystkie jednostki są w pikselach. Plik SVG może skalować te piksele do view-boxa, ale w taki sposób, aby zawsze wyglądały jak geometryczna skala całego kształtu.

Jeśli na przykład chcesz skalować cały prostokąt, ale zachować wysokość i szerokość krzywych na poziomie 20 pikseli, format SVG nie będzie odpowiedni.

Utwórz flagę za pomocą shape()

Porównaj ten sam wynik, używając funkcji shape(). Funkcja shape akceptuje serię poleceń podobnych do poleceń ścieżki SVG. Te polecenia akceptują jednak długości i procenty w dowolnej jednostce CSS.

Ten kod CSS zamienia flagę a na shape() z jednostkami procentowymi:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

Zadbaj o responsywność

Dzięki pełnej gamie dostępnych długości usług porównywania cen możesz wybrać, których używać w przypadku poszczególnych współrzędnych.

Aby na przykład zmienić rozmiar całego elementu flagi, zachowując przy tym stałą wysokość krzywej, wykonaj te czynności:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

Dodawanie właściwości i animacji niestandardowych

Teraz, gdy kształt jest zdefiniowany w CSS, możesz też używać właściwości niestandardowych, aby ułatwić sobie manipulowanie wysokością:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Możesz nawet animować właściwości CSS za pomocą deskryptora @property i ograniczyć ją, aby nie wychodziła poza obszar:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Wypróbuj wersję demonstracyjną

W Chrome 135 lub Safari 18.4 możesz zobaczyć animację kształtu flagi utworzoną za pomocą clip-path: shape() w tym pokazie CodePen.

Podsumowanie

clip-path: shape() umożliwia przycinanie elementów za pomocą dowolnych i responsywnych kształtów, co wcześniej było możliwe tylko przy użyciu takich technik jak gradienty stożkowe lub SVG utworzone za pomocą JavaScript.

Pełną składnię znajdziesz w specyfikacji.

Obecnie działa tylko w przypadku clip-path. W przyszłości planujemy użyć tego typu kształtu do ustawienia kształtu obramowania elementu, co pozwoli na jeszcze więcej sposobów wyrażania siebie poza prostokątem.