Giới thiệu về Clipping Sử dụng clip-path trong CSS

clip-path là một thuộc tính rất thú vị cho phép cắt phần có thể nhìn thấy của các phần tử SVG, hình ảnh hoặc bất kỳ phần tử HTML nào thực sự.

Xác định các hình dạng cơ bản với clip-path

clip-con đường giúp bạn dễ dàng cắt ra hình dạng cơ bản sử dụng một trong các hình đa giác, hình elip, hình tròn hoặc hình chữ nhật từ khóa, mà là một phần của loại trừ CSS module.

Đa giác

Đa giác là hình dạng linh hoạt nhất trong số các hình có sẵn vì nó cho phép bạn chỉ định bất kỳ lượng điểm nào, giống như đường dẫn SVG . Các điểm được cung cấp là các cặp tọa độ X và Y có thể là bất kỳ đơn vị nào (ví dụ: pixel hoặc dựa trên phần trăm). Bởi vì nó linh hoạt nhất, nó cũng phức tạp nhất và có thể bạn cần sử dụng một công cụ để xác định quan điểm của bạn .

Hãy minh họa bằng một ví dụ. Đầu tiên, bạn sẽ thấy hình ảnh bắt đầu của ta , sau đó là hình ảnh của ta với đường dẫn clip được áp dụng để có hình tam giác, tiếp theo là hình chữ X phức tạp hơn và cuối cùng là hình ngôi sao:

/* Triangle */ .polygon1 {   -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);   clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } /* X */ .polygon2 {   -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);   clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); } /* Star */ .polygon3 {   -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

Vòng tròn

Các hình tròn được định nghĩa với cú pháp này: circle (bán kính tại posX posY) . Vị trí là tùy chọn và sẽ mặc định là 50% 50% . Dưới đây là hai ví dụ để minh họa:

.circle {   -webkit-clip-path: circle(50%);   clip-path: circle(50%); } .circle2 {   -webkit-clip-path: circle(70% at 70% 20%);   clip-path: circle(70% at 70% 20%); }

Hình elip

Hình elip được định nghĩa bằng cú pháp này: ellipse (radiusX radiusY tại posX posY) . , vị trí là tùy chọn và sẽ mặc định là 50% 50% . Đây là hai ví dụ:

.ellipse {   -webkit-clip-path: ellipse(50% 35%);   clip-path: ellipse(50% 35%); } .ellipse2 {   -webkit-clip-path: ellipse(50% 65% at 70% 50%);   clip-path: ellipse(50% 65% at 70% 50%); }

Inset

Với inset, bạn có thể xác định một hình chữ nhật bên trong và mọi thứ bên ngoài sẽ được cắt bỏ. Điều này giúp bạn dễ dàng cắt một cách hiệu quả hình ảnh hoặc một phần tử trực tiếp trong trình duyệt. Bạn cũng có thể làm cho hình chữ nhật được làm tròn bằng từ khóa tròn và giá trị bán kính đường viền:

.inset {   -webkit-clip-path: inset(20% 25% 20% 10%);   clip-path: inset(20% 25% 20% 10%); } .inset2 {   -webkit-clip-path: inset(45% 0% 33% 10% round 10px);   clip-path: inset(45% 0% 33% 10% round 10px); }

Hoạt ảnh và chuyển tiếp

Hoạt ảnh và chuyển tiếp cũng có thể được áp dụng với clip-path để tạo ra các hiệu ứng thú vị. Chỉ cần đảm bảo tất cả các bước trong hoạt ảnh của bạn chứa cùng một lượng điểm. Hãy chứng minh bằng một ví dụ:

Hoạt hình! Hoạt ảnh đường dẫn clip

Đây là các luật CSS được sử dụng để tạo hoạt ảnh này:

.trigger-btn:hover + img {   animation: magic 4s infinite; }  @keyframes magic {   0% {     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);   }   20% {     -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);     clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);   }   40% {     -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);     clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);   }   60% {     -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);     clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);   }   80% {     -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);     clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);   }   100% {     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);   } }

Hình dạng SVG tùy chỉnh

Bạn cũng có thể xác định bất kỳ hình dạng SVG tùy ý nào để hoạt động như giá trị đường dẫn clip. Rõ ràng bạn cần bắt đầu trong một công cụ như Sketch để tạo hình dạng của bạn và sau đó sao chép đánh dấu SVG vào một editor . Trong đánh dấu SVG của bạn, chỉ cần bọc hình dạng của bạn trong một phần tử clipPath và bọc clipPath trong một khối defs .

Ví dụ như thế này:

<svg width="0" height="0">   <defs>     <clipPath id="my-shape">       <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">       </path>     </clipPath>   </defs> </svg>

Và bây giờ bạn có thể áp dụng hình dạng đã xác định làm giá trị đường dẫn clip bằng cách sử dụng từ khóa url và id của hình dạng SVG:

.svg-shape {   -webkit-clip-path: url(#my-shape);   clip-path: url(#my-shape); }

Tài nguyên bổ sung

Clippy , một công cụ tuyệt vời giúp bạn xác định các giá trị đường dẫn clip của bạn .
Hỗ trợ trình duyệt: Tính đến năm 2020, clip-path có mức độ phủ sóng 95% trong các trình duyệt trên toàn thế giới, nhưng hãy đảm bảo bao gồm các biến thể có tiền tố -webkit-clip-path , mà Safari vẫn yêu cầu.

Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03