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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Noam Rosenthal

Ngày phát hành: 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 một vòng tròn, đa giác hoặc thậm chí là một đườ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 cũng có khả năng thích ứng.

Tạo hình dạng cờ

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

Hình cờ không phải là đa giác chính xác, vì đường viền trên cùng và dưới cùng là các đường cong Bézier dạng khối lập phương thay vì đườ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, một đường dẫn SVG là một loạt các lệnh đường dẫn:

1. Di chuyển đến 0, 20.
2. Đường cong đến 100, 20, sử dụng các điểm điều khiển (25,0 và 75, 40).
3. Đường kẻ dọc đến 80.
4. Đường cong đến 0, 80, sử dụng các điểm điều khiển (75,100 và 25,50).
5. Đóng đường dẫn (đường đến 0,20).

Thao tác này sẽ vẽ 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 hộp 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 điều chỉnh theo tỷ lệ, nhưng vẫn duy trì 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 chiều dài và tỷ lệ phần trăm CSS, trong bất kỳ đơn vị CSS nào.

CSS sau đây chuyển đổi cờ thành shape() với đơ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
  );
}

Tạo giao diện thích ứng

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

Ví dụ: để làm cho toàn bộ kích thước của cờ theo tỷ lệ kích thước của phần tử, nhưng 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

Với hình dạng hiện đã được xác định trong CSS, bạn cũng có thể sử dụng các thuộc tính tuỳ chỉnh để dễ dàng thao tác với 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 chỉ số mô tả @property và kẹp thuộc tính đó để không vượt quá giới hạn:

@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ạ CodePen này.

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 chỉ có thể sử dụng các kỹ thuật như chuyển màu 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 với clip-path. Trong tương lai, chúng tôi dự định sử dụng loại hình dạng này để đặt hình dạng của đường viền 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.