Sử dụng shape() để cắt hình ảnh thích ứng

Noam Rosenthal

Ngày xuất bản: 8 tháng 4 năm 2025

Thuộc tính clip-path cho phép bạn thay đổi hình dạng của một phần tử bằng cách cắt thành hình tròn, đa giác hoặc thậm chí là đường dẫn SVG. Tuy nhiên, trước Chrome 135 và Safari 18.4, bạn phải chọn giữa các đa giác thích ứng và các hình dạng phức tạp hơn không thích ứng bằng cách sử dụng đường dẫn SVG. Với hàm shape() mới, clip-path có thể cắt phần tử thành một hình dạng không phải đa giác và cũng có khả năng thích ứng.

Tạo hình cờ

Ví dụ: hãy so sánh việc tạo hình dạng cờ bằng clip-path: path() và clip-path: shape().

Hình dạng cờ không hoàn toàn là một đa giác, vì đường viền trên và dưới của cờ là các đường cong Bézier bậc ba chứ không phải đường thẳng hoặc góc bo tròn.

Tạo cờ bằng clip-path: path()

Bạn có thể biểu thị một hình dạng như cờ này bằng đường dẫn 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");
}

Để phân tích điều này, đường dẫn SVG là một chuỗi các lệnh về đường dẫn:

1. Di chuyển đến 0, 20.
2. Đường cong đến 100, 20, sử dụng các điểm kiểm soát (25,0 và 75, 40).
3. Đường thẳng đứng đến 80.
4. Đường cong đến 0, 80, sử dụng các điểm kiểm soát (75,100 và 25,50).
5. Đóng đường dẫn (đường đến 0,20).

Thao tác này vẽ một hình dạng cờ, nhưng tất cả các đơn vị đều tính bằng pixel. SVG có thể điều chỉnh tỷ lệ các pixel đó thành một khung hiển thị, nhưng theo cách luôn trông giống như tỷ lệ hình học của toàn bộ hình dạng.

Ví dụ: nếu bạn muốn toàn bộ hình chữ nhật được thu phóng nhưng vẫn giữ nguyên chiều cao và chiều rộng của các đường cong là 20px, thì SVG sẽ không đáp ứng được yêu cầu này.

Tạo cờ bằng shape()

So sánh cùng một kết quả bằng cách sử dụng shape(). Hàm hình dạng chấp nhận một loạt lệnh, tương tự như các lệnh đường dẫn SVG. Tuy nhiên, các lệnh này chấp nhận độ dài và tỷ lệ phần trăm CSS, ở bất kỳ đơn vị CSS nào.

CSS sau đây chuyển đổi cờ shape() bằng đơn vị phần trăm:

.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
  );
}

Đảm bảo nội dung phản hồi

Với đầy đủ các độ dài CSS có sẵn, bạn có thể chọn độ dài nào để sử dụng cho từng toạ độ.

Ví dụ: để toàn bộ kích thước của cờ được điều chỉnh theo kích thước của phần tử, nhưng vẫn giữ nguyên chiều cao của đường cong, bạn có thể làm như sau:

.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
  );
}

Thêm thuộc tính và ảnh động tuỳ chỉnh

Giờ đây, khi đã xác định hình dạng trong CSS, bạn cũng có thể sử dụng các thuộc tính tuỳ chỉnh để dễ dàng điều chỉnh chiều cao:

.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
  )
}

Bạn thậm chí có thể tạo ảnh động cho thuộc tính CSS bằng cách sử dụng bộ mô tả @property và giới hạn để thuộc tính này không vượt quá:

@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
  )
}

Xem bản minh hoạ

Trong Chrome 135 hoặc Safari 18.4, bạn có thể thấy hình dạng cờ động được tạo bằng clip-path: shape() trong bản minh hoạ này trên CodePen.

Tóm tắt

clip-path: shape() cho phép bạn cắt phần tử bằng các hình dạng tuỳ ý và thích ứng. Trước đây, bạn chỉ có thể làm việc này bằng các kỹ thuật như gradient hình nón hoặc SVG được tạo bằng JavaScript.

Hãy xem quy cách để biết cú pháp đầy đủ.

Hiện tại, tính năng này chỉ hoạt động đối với clip-path. Trong tương lai, chúng ta dự kiến sẽ sử dụng loại hình dạng này để đặt hình dạng cho đường viền của phần tử, nhờ đó mở ra nhiều cách thể hiện không phải hình chữ nhật hơn nữa.