Hàm CSS polygon()

Định nghĩa và cách sử dụng

CSS polygon() Hàm được sử dụng để định nghĩa một đa giác.

polygon() Hàm với clip-path Thuộc tính và shape-outside Sử dụng cùng nhau.

Mô hình

Ví dụ 1

Cắt hình ảnh thành đa giác:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Thử ngay

Ví dụ 2

Cắt hình ảnh thành đa giác:

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Thử ngay

Ví dụ 3

Sử dụng polygon()、clip-path và shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Thử ngay

Ngữ pháp CSS

polygon(fill-rule, length-percentage)
Giá trị Mô tả
fill-rule

Tùy chọn. Định nghĩa quy tắc lấp đầy. Có thể là nonzero hoặc evenodd.

Giá trị mặc định là nonzero.
length-percentage

Bắt buộc. Định nghĩa điểm định nghĩa đa giác. Đây có thể là giá trị chiều dài hoặc phần trăm.

Mỗi điểm là một cặp tọa độ x và y. 0 0 định nghĩa góc trên cùng bên trái, 100% 100% định nghĩa góc dưới cùng bên phải.

Chi tiết kỹ thuật

Phiên bản: Mô đun CSS Shape Level 1

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

Trang liên quan

Tham khảo:Thuộc tính clip-path

Tham khảo:Thuộc tính shape-outside

Tham khảo:Hàm circle()

Tham khảo:Hàm ellipse()

Tham khảo:Hàm inset()