Chúng ta có thể tạo một hình tam giác bằng thuộc tính clip-path CSS
cú pháp
Cú pháp của thuộc tính CSS clip-path như sau -
Selector {
clip-path: /*value*/
}Thí dụ
Các ví dụ sau minh họa thuộc tính đường dẫn clip CSS
Bản thử trực tiếp
Điều này mang lại đầu ra sau
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
0 tham chiếu một phần tử SVG
clip-path =1
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
clip-path =2
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
Một hình dạng có kích thước và vị trí được xác định bởi giá trị
clip-path =3. Nếu không có hộp hình học nào được chỉ định, thì
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
clip-path =4 sẽ được sử dụng làm hộp tham chiếu. Một trong
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
clip-path =5
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
Xác định một hình chữ nhật chèn
clip-path =6
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
Xác định hình tròn sử dụng bán kính và vị trí
clip-path =7
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
Định nghĩa một hình elip sử dụng hai bán kính và một vị trí
clip-path =8
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
Xác định đa giác bằng cách sử dụng quy tắc điền SVG và một tập hợp các đỉnh
clip-path =9
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
Xác định hình dạng bằng cách sử dụng quy tắc điền SVG tùy chọn và định nghĩa đường dẫn SVG
clip-path =3
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
Nếu được chỉ định kết hợp với
clip-path =2, giá trị này xác định hộp tham chiếu cho hình dạng cơ bản. Nếu được chỉ định bởi chính nó, nó sẽ làm cho các cạnh của hộp được chỉ định, bao gồm bất kỳ hình dạng góc nào [chẳng hạn như
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
62], trở thành đường cắt. Hộp hình học có thể là một trong các giá trị sau
63
Sử dụng làm hộp tham chiếu
clip-path =4
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url[ * ] |
src[ * ]
=
|
margin-box
=
border-box |
padding-box |
content-box
Sử dụng làm hộp tham chiếu
65
Sử dụng làm hộp tham chiếu
66
Sử dụng làm hộp tham chiếu
67
Sử dụng hộp giới hạn đối tượng làm hộp tham chiếu
68
Sử dụng hộp giới hạn nét làm hộp tham chiếu
69
Sử dụng chế độ xem SVG gần nhất làm hộp tham chiếu. Nếu thuộc tính
40 được chỉ định cho thành phần tạo chế độ xem SVG, thì hộp tham chiếu được định vị ở gốc của hệ tọa độ được thiết lập bởi thuộc tính
41 và kích thước của kích thước hộp tham chiếu được đặt thành giá trị chiều rộng và chiều cao của
43
Không có đường cắt nào được tạo
Ghi chú. Một giá trị được tính toán khác với
43 dẫn đến việc tạo ngữ cảnh xếp chồng mới giống như cách mà CSS
45 thực hiện đối với các giá trị khác với
46
Giá trị ban đầu
43Áp dụng cho tất cả các phần tử;