Tóm tắt cách tận dụng hàm `shape()` mới của CSS

• Hàm CSS shape() đã bắt đầu được hỗ trợ trên các trình duyệt Chromium và WebKit
• Khác với path() trước đây, giờ đây có thể định nghĩa các hình dạng phức tạp bằng cú pháp và đơn vị dễ đọc hơn theo kiểu CSS
• Khi tạo các hình dạng phức tạp trong clip-path, có thể triển khai theo cách dựa trên lệnh tiếng Anh thay vì dùng tọa độ SVG
• Với các lệnh mới như line, arc, curve, có thể viết đường thẳng, đường cong và cung tròn ngắn gọn hơn
• shape() hiện vẫn hỗ trợ animation còn hạn chế, nhưng vẫn có thể tạo thay đổi động phản ứng với hover/focus

---

Tổng quan

• Hàm CSS shape() được dùng cùng với clip-path, cho phép cắt hình dạng phức tạp ngay trong trình duyệt
• Trước đây có thể dùng các hình cơ bản như circle, ellipse, polygon, nhưng các hình tự do chỉ có thể thực hiện bằng path()
• Do path() yêu cầu nhập trực tiếp tọa độ và lệnh SVG, nên tính dễ đọc thấp và đường cong học tập cao hơn

Đặc điểm của hàm shape()

• Có thể xây dựng hình vector theo phong cách CSS
• Có thể chỉ định điểm bắt đầu bằng từ khóa hướng (from top left) hoặc giá trị tọa độ (from 0 0)
• Hình dạng được cấu thành từ một chuỗi lệnh. Ví dụ: line, vline, arc, curve, smooth

Giải thích các lệnh chính

• line
  • Ý nghĩa: vẽ một đường thẳng từ điểm bắt đầu
  • Cách dùng: chỉ định vị trí tương đối bằng từ khóa by
  • Ví dụ: line by -2px 3px
• vline
  • Ý nghĩa: vẽ đường thẳng đứng
  • Cách dùng: dùng to cho vị trí tuyệt đối, by cho vị trí tương đối
  • Ví dụ: vline to 50px
• hline
  • Ý nghĩa: vẽ đường ngang
  • Cách dùng: dùng to cho vị trí tuyệt đối, by cho vị trí tương đối
  • Ví dụ: hline to 95%
• arc
  • Ý nghĩa: vẽ một đường cong dạng elip
  • Cách dùng:
    • to: điểm kết thúc của cung
    • with: hướng nghiêng của cung (ngang/dọc)
    • of: bán kính của elip chứa cung đó (ngang/dọc)
  • Ví dụ: arc to 10% 50% of 1%
• curve
  • Ý nghĩa: vẽ đường cong Bézier
  • Cách dùng:
    • to: điểm kết thúc của đường cong
    • with: điểm điều khiển của đường cong (điều chỉnh độ cong)
  • Ví dụ: curve to 0% 100% with 50% 0%
• smooth
  • Ý nghĩa: vẽ đường cong mượt (các đường cong Bézier nối tiếp)
  • Cách dùng:
    • to: điểm kết thúc
    • by: tọa độ tương đối
    • with: điểm điều khiển

Các điểm khác

• shape() có thể thay đổi động trong trạng thái hover/focus
• Trên các trình duyệt hiện tại, animation transition chưa hoạt động
• Cũng có thể dùng hàm tính toán calc()

Liên kết tham khảo

• Đặc tả chính thức