Używanie funkcji shape() do elastycznego przycinania

Noam Rosenthal

Data publikacji: 8 kwietnia 2025 r.

Właściwość clip-path umożliwia zmianę kształtu elementu przez przycięcie go do okręgu, wielokąta lub nawet ścieżki SVG. Jednak przed wprowadzeniem Chrome 135 i Safari 18.4 trzeba było wybierać między responsywnymi wielokątami a bardziej złożonymi kształtami, które nie są responsywne, przy użyciu ścieżek SVG. Dzięki nowej funkcji shape() element clip-path może przycinać element do kształtu innego niż wielokąt, który również jest elastyczny.

Tworzenie kształtu flagi

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

Flaga nie jest dokładnie wielokątem, ponieważ jej górna i dolna krawędź to krzywe Beziera trzeciego stopnia, a nie proste linie ani 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. Przenieś do 0, 20.
2. Wygięcie do 100, 20 za pomocą punktów kontrolnych (25,0 i 75, 40).
3. Linia pionowa do 80.
4. Krzywa do 0, 80 z użyciem punktów kontrolnych (75, 100 i 25, 50).
5. Zamknij ścieżkę (linia do punktu 0,20).

Rysuje to kształt flagi, ale wszystkie jednostki są podane w pikselach. SVG może skalować te piksele do pola widoku, ale w taki sposób, że zawsze będzie to wyglądać jak geometryczne skalowanie całego kształtu.

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

Utwórz flagę za pomocą shape()

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

Ten kod CSS przekształca flagę shape() na jednostki procentowe:

.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 to, aby była responsywna

Dostępny jest pełen zakres długości CSS, więc możesz wybrać, które z nich chcesz użyć w przypadku każdego współrzędnego.

Jeśli na przykład chcesz, aby cały rozmiar flagi skalował się w zależności od rozmiaru elementu, ale wysokość krzywej pozostawała stała, możesz wykonać 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 niestandardowych i animacji

Kształt jest teraz zdefiniowany w CSS, więc możesz też użyć właściwości niestandardowych, aby łatwo manipulować 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ść CSS za pomocą deskryptora @property i ograniczyć ją, aby nie przekraczała zakresu:

@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ć animowaną flagę utworzoną za pomocą clip-path: shape() w tej wersji demonstracyjnej w CodePen.

Podsumowanie

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

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

Obecnie działa tylko w przypadku clip-path. W przyszłości planujemy używać tego rodzaju kształtu do ustawiania kształtu obramowania elementu, co pozwoli na jeszcze bardziej niestandardowe sposoby wyrażania się.