Hướng dẫn polygon css - css đa giác

1. Introduction

Thuộc tính

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1 tạo ra một vùng cắt nơi nội dung bên trong nó được hiển thị và nội dung bên ngoài nó bị ẩn đi.

Đây là một ví dụ cơ bản về

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

2.

.card {
  background-color: #77cce9;
  clip-path: circle(80px at 50% 50%);
}

Với việc sử dụng

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1, vùng hiển thị chỉ là vòng tròn màu xanh lam (

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

4).

Bất cứ phần nào bên ngoài vòng tròn là vô hình.

Đây là một hình ảnh động cho thấy một đoạn cắt của vòng tròn trong ví dụ trước.

Với ý nghĩ đó, hãy lấy một ví dụ đơn giản để xem cách một phần tử sử dụng

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1.

Trong ví dụ bên dưới, vùng bị cắt là một hình tròn có kích thước

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

7 và tâm của nó được đặt ở vị trí

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

8 (top left).

Lưu ý rằng người dùng chỉ có thể nhìn thấy khu vực được đánh dấu (màu xanh lam đậm).

Phần còn lại của hình tròn được cắt bớt (cliped).

Câu hỏi đặt ra là, làm thế nào chúng ta có thể hiển thị toàn bộ vòng tròn?

Đó là việc chúng ta cần thay đổi các điểm trục x và trục y.

Tâm của vòng tròn được đặt

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

7 từ bên trái và

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

7 từ trên cùng.

Bây giờ bạn đã hiểu cách hoạt động của hệ tọa độ, tôi sẽ giải thích các giá trị có thể có cho thuộc tính

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1.

3. The Clip-Path Values

3.1 Inset

Giá trị

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

2 xác định một hình chữ nhật

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

2.

Chúng ta có thể kiểm soát bốn cạnh, giống như chúng ta xử lý

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

4 hoặc

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

5.

Trong ví dụ sau,

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

6 có độ dài

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

7 từ tất cả các cạnh (trên, phải, dưới và trái).

.card {
  clip-path: inset(20px);
}

Nếu bạn cần điều chỉnh phần chèn từ một trong các cạnh, bạn có thể. Đây là một ví dụ khác:

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

The eleent has a 50px inset from the bottom.

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

6 mới có một

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

2

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

0 từ bên dưới.

Một câu hỏi nữa là, liệu chúng ta có thể làm các góc được bo tròn như các block bình thuờng không?

Tất nhiên là có thể nhờ thuộc tính

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

1.

Thêm

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

2 có thể bo tròn các góc.

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

Không chỉ vậy, chúng ta có thể điều chỉnh bán kính cho từng bên một cách riêng biệt.

Bên dưới là một ví dụ với bán kính bằng

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

3 cho các góc trên cùng bên phải và dưới cùng bên trái.

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

3.2 Circle

Để sử dụng giá trị

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

4, chúng ta cần bán kính và vị trí của nó. Đây là một ví dụ:

.card {
  clip-path: circle(80px at 50% 50%);
}

Bán kính của hình tròn là

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

5 và nó được định vị

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

6 trên trục x và

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

61 trên trục y.

3.3 Ellipse

Với

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

8, chúng ta có thể thiết lập chiều rộng và chiều cao để tạo một hình cắt hình bầu dục.

.card {
  clip-path: ellipse(100px 80px at center);
}

3.4 Polygon

Giá trị

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

9 là giá trị thú vị nhất.

Chúng ta có khả năng kiểm soát nhiều bộ giá trị trục x và trục y khác nhau.

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

Đây là một ví dụ sử dụng

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

9 để cắt một hình chữ nhật.

Lưu ý cách chúng ta ánh xạ từng tập hợp điểm với tọa độ của nó trên các trục.

.card {
  clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
}

Chúng ta cũng có thể vẽ các hình phức tạp với nhiều điểm bằng cách sử dụng giá trị

.card {
  clip-path: circle(80px at 50% 50%);
}

1.

3.5 Path

Giá trị

.card {
  clip-path: circle(80px at 50% 50%);
}

2 cho phép chúng ta sử dụng một đường dẫn

.card {
  clip-path: circle(80px at 50% 50%);
}

3 để cắt một khu vực cụ thể.

Hiện tại, việc hỗ trợ các trình duyệt khác nhau còn nhiều hạn chế.

Chúng ta cần sử dụng inline SVG, sau đó sử dụng

.card {
  clip-path: circle(80px at 50% 50%);
}

4 làm giá trị cho

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1.

<svg class="svg">
  <clipPath id="triangle" clipPathUnits="objectBoundingBox">
    <path d="M0.05,0.05 h2 v1">path>
  clipPath>
svg>

Trong CSS, chúng ta cần thêm đường dẫn bằng giá trị

.card {
  clip-path: circle(80px at 50% 50%);
}

4.

.card {
  clip-path: inset(20px);
}

0

Hiện tại, chúng ta đã xem qua lý thuyết về

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1 và các giá trị tổng quát, đã đến lúc áp dụng nó vào thực tế rồi.

(go)

4. Use Cases

4.1 Angled Effect

Trong các trang web hiện đại, bạn có thể đã thấy nhiều mẫu tương tự như hình bên dưới, trên web sẽ có một số phần có nền hơi góc cạnh và có độ dài các cạnh không đều nhau.

Đó là một trường hợp hoàn hảo để sử dụng

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1

Chúng ta sẽ sử dụng

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

9.

.card {
  clip-path: inset(20px);
}

1

Trong một số trường hợp, việc điều chỉnh 8 số cho giá trị đa giác có thể gây khó chịu.

Vì lý do đó, chúng ta có một mẹo nhỏ đó là phụ thuộc vào trình duyệt để tạo ra hình dạng mà chúng ta muốn.

Đầu tiên, chúng ta cần thêm những điều sau:

.card {
  clip-path: inset(20px);
}

2

Sau đó, chúng ta cần kiểm tra phần đó của

.card {
  clip-path: ellipse(100px 80px at center);
}

0.

Sau khi hoàn tất, hãy lưu ý rằng có một biểu tượng đa giác nhỏ ở phía bên trái của giá trị

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

9.

Sau khi nhấp vào biểu tượng đó, chúng ta có thể chỉnh sửa đa giác trong trình duyệt.

Thật tuyệt vời phải không? Gif bên dưới sẽ là ví dụ cho bạn.

Điều đầu tiên tôi nghĩ đến là chỉ cần thêm một lớp

.card {
  clip-path: ellipse(100px 80px at center);
}

5 hoặc

.card {
  clip-path: ellipse(100px 80px at center);
}

6.

Thật không may, chúng cũng sẽ nằm trong phạm vi ảnh hưởng của

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1, vì vậy ngay cả khi chúng ta thêm

.card {
  clip-path: ellipse(100px 80px at center);
}

5 hoặc

.card {
  clip-path: ellipse(100px 80px at center);
}

6, nó cũng sẽ không xuất hiện như mong đợi.

Trong trường hợp như vậy, giải pháp là sử dụng nhiều phần tử, với mỗi phần tử có một điểm cắt khác nhau. Đây là cách chúng ta có thể làm điều đó.

.card {
  clip-path: inset(20px);
}

4

.card {
  clip-path: inset(20px);
}

5

Chúng ta có một phần tử giả có cùng kích thước và đường dẫn clip như phần tử kia.

Sự khác biệt là nó được đặt bên dưới nó với

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

0 và

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

1.

Tôi đã sử dụng giá trị

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

2 vì nó là kết quả của

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

3.

4.4 Reveal On Scroll

Bằng cách sử dụng API IntersectionObserver , chúng ta có thể hiển thị các phần tử nhất định trên trang khi người dùng đang cuộn.

Giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1 mà tôi thấy hữu ích cho hiệu ứng này là

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

2.

Lưu ý rằng hình chữ nhật màu xanh có thể hoàn toàn vô hình bằng cách áp dụng

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

6.

Giá trị làm cho nó vô hình là

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

6 vì chúng ta đang áp dụng nội dung từ bốn phía.

Nói cách khác, hình chữ nhật được áp dụng từ cạnh đến tâm của hình chữ nhật.

Trong hình bên dưới,

.card {
  clip-path: inset(20px 20px 50px round 15px);
}

2 đang được sử dụng để hiển thị hình ảnh trong khi người dùng đang cuộn.

Với nó, chúng ta có thể làm cho hình ảnh hiển thị bằng cách cuộn.

.card {
  clip-path: inset(20px);
}

6

.card {
  clip-path: inset(20px);
}

7

Nó thực sự đơn giản phải không?

Chúng ta đã tạo một hiệu ứng cuộn đơn giản với một vài dòng CSS và Javascript.

Không chỉ vậy, chúng ta còn có thể kiểm soát hướng của quá trình chuyển đổi do scroll.

Để làm điều đó, chúng ta chỉ cần sử dụng một giá trị từ bốn cạnh.

Ví dụ: nếu chúng ta muốn chuyển đổi từ trên xuống dưới, giá trị dưới cùng phải được chuyển từ 100% sang 0.

Đây là hình ảnh giải thích điều đó.

And here is an interactive demo.

Và đây là một bản demo:

4.5 Hover And Animation Effects

Khả năng tạo hiệu ứng

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

9 và

.card {
  clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
}

0 với

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1 là vô tận.

Hãy xem xét ví dụ sau.

Những gì chúng ta cần làm là thêm hiệu ứng

.card {
  clip-path: polygon(x y, x y, x y, x y);
}

9 từ một vị trí đã được chỉ định.

Trong trường hợp này, hãy sử dụng giá trị

.card {
  clip-path: inset(20px 20px 50px round 15px 0);
}

4.

Để làm cho nó dễ dàng hơn và dễ maintaince hơn, hãy sử dụng các biến CSS.

Bằng cách đó, chúng ta sẽ không trùng lặp toàn bộ

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1.

Chúng ta sẽ chỉ thay đổi các biến CSS cần thiết.

.card {
  clip-path: inset(20px);
}

8

Gif bên dưới để biết cách hoạt động.

.card {
  clip-path: inset(20px);
}

9

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

0

Complement

Để dễ dàng hơn trong việc sử dụng giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1, bennettfeely sẽ giúp bạn làm điều đó

• Link tham khảo:

https://bennettfeely.com/clippy/

Conclusion

Bên trên là tìm hiểu về thuộc tính

.card {
  clip-path: inset(20px 20px 50px 20px);
  // hoặc:
  // clip-path: inset(20px 20px 50px);
  // theo tứ tự là trên - phải - dưới - trái giống như margin hoặc padding
}

1 trong CSS, hi vọng giúp ích được cho mọi người trong việc vẽ hay custom lại những giao diện khó

Thank for watching!!!

Reference

• bennettfeely
• transition
• Sloped edges with consistent angle in css
• Clip-path