Giải thích về đa giác đường dẫn clip – clip path polygon css

Bạn đang xem : đa giác đường dẫn clip css

Sau một kỳ nghỉ cuối tuần dài- lưới, cắm trại ở Cascades, tôi quay lại văn phòng chơi với CSS và đa giác đường dẫn clip. Tôi bắt đầu làm theo bài viết / hướng dẫn của Drew Minns , cùng với CodePen . Vì tôi chỉ muốn tìm hiểu cách các đa giác đường dẫn clip được xây dựng nên tôi đã thực hiện các thay đổi nhỏ đối với bản gốc mà bạn có thể xem tại đây .

Tôi cũng thích ý tưởng sử dụng đường dẫn clip áp dụng cho hình ảnh làm hình thu nhỏ hoặc thậm chí là điều hướng:

(Tôi đã sử dụng đánh dấu chế độ hòa trộn CSS cho hiệu ứng di chuột trên hình ảnh đầu tiên). Cái hay của việc sử dụng clip-path là hình ảnh có thể dễ dàng thay đổi mà không cần chỉnh sửa thủ công. Chúng thậm chí có thể rất năng động.

Clip-Path là gì?

Thuộc tính clip-path trong CSS cho phép bạn chỉ định một vùng cụ thể của một phần tử để hiển thị, thay vì hiển thị toàn bộ vùng. ~

Theproperty trong CSS cho phép bạn chỉ định một khu vực cụ thể của một phần tử để hiển thị, thay vì hiển thị toàn bộ khu vực. ~ Thủ thuật CSS

Trong ví dụ trên, đa giác đường dẫn clip tạo ra các thụt lề hình tam giác về mục điều hướng khi di chuột qua. Trong hình ảnh tiếp theo, đa giác đường dẫn clip được áp dụng để cắt các phần của hình ảnh để tạo bong bóng văn bản theo phong cách truyện tranh.

Làm cách nào để tạo một đa giác đường dẫn clip?

Đường dẫn clip là một chuỗi các cặp tọa độ, mỗi cặp được phân tách bằng dấu phẩy. Tôi đã mất một lúc để tìm hiểu nó và đây là cách tôi hình dung nó.

Xem Thêm  ALTER TABLE (Transact-SQL) - Máy chủ SQL - bảng thay đổi cột thay đổi trong máy chủ sql

Các tọa độ được nhóm thành các cặp X Y trong đó X là trục hoành và Y là trục tung.

Bắt đầu từ góc trên bên phải, tọa độ sẽ là X0 Y0 hoặc 0 0. Khoảng cách từ điểm bắt đầu tăng lên đến 100%. Tọa độ của góc dưới cùng bên phải là X100% Y100% hoặc 100% 100%.

Nếu tôi định tạo một hộp vuông, đường dẫn clip của tôi sẽ giống như sau: clip-path: polygon (0 0, 100% 0, 100% 100%, 0 100%). Hoặc, về mặt hình ảnh:

Lưu ý rằng cuối dòng cũng là đầu dòng mới – điều này là tự động nên bạn không cần phải lặp lại. Đối tượng bạn đang vẽ luôn muốn được đóng lại, vì vậy tọa độ cuối cùng mà bạn cung cấp cho nó sẽ tạo ra một đường thẳng với tọa độ đầu tiên của đường dẫn.

Điều thú vị là khi bạn tạo ra các hình dạng. Ví dụ: đây là đường dẫn clip cho hình dạng x di chuột trong hình đầu tiên của bài viết này:

đường dẫn clip: đa giác (50% 20%, 70% 0, 100% 0,100% 20%, 80% 50%, 100% 80%, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 80%, 20% 50%, 0 20%, 0 0, 30% 0);

Nếu bạn dành chút thời gian, bạn có thể thấy rằng nó phát ra như thế này bằng chữ:

  • Bắt đầu tại điểm được xác định bởi X50% Y20% và chuyển đến X70% Y0
  • Từ đó chuyển đến X100% Y0
  • Từ đó, chuyển đến X100% Y20%
  • và v.v.…

Có những đường dẫn clip nào khác?

Ngoài đa giác, bạn có thể xác định hình tròn, hình elip và hình chữ nhật lồng vào bằng cách sử dụng clip-path. Xem clip-path trên WPD để biết thêm thông tin.

Những trình duyệt nào hỗ trợ đường dẫn clip?

Đối với các trình duyệt webkit, bạn sẽ cần sử dụng tiền tố. Đây là mã đánh dấu CSS mà tôi thường sử dụng:

Xem Thêm  Hiểu tính kế thừa và đa hình của Java - kế thừa và đa hình java

-webkit-clip-path: polygon (…);
clip-path: polygon (…);

Hỗ trợ trình duyệt cũng phụ thuộc vào hình dạng. Đa giác được hỗ trợ bởi tất cả các trình duyệt hiện tại ngoại trừ IE (tất nhiên). Đường dẫn clip vòng tròn chỉ được hỗ trợ trong Chrome, Opera và Safari. Xem tại đây để biết thêm thông tin. May mắn thay, nó không được sử dụng tốt cho IE – hình ảnh sẽ chỉ được hiển thị như một hộp thông thường.


Xem thêm những thông tin liên quan đến chủ đề clip path polygon css

How to make shapes with CSS

  • Tác giả: Kevin Powell
  • Ngày đăng: 2018-03-23
  • Đánh giá: 4 ⭐ ( 5476 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: It’s pretty easy to makes shapes with only a small amount of HTML and some CSS. We have super simple options like border-radius, we’ve got slightly more complicated things we can do with pseudo elements, and if you need some really unique shapes, we can use clip-path.

    Border radius is nice for making some very simple shapes, and it’s very easy to do. I don’t explore it too much in this video, but it’s a nice option that has awesome browser support.

    Pseudo elements also have awesome browser support, and they allow us to make some rather complicated shapes with only CSS if you’re up to the task! In this video, I make a chevron type thing with them.

    For the really complicated shapes, clip-path is the answer. You can create literally any shape you want, the only thing to watch out for is browser support. It’s not terrible, but there are some places where it won’t work, so make sure whatever you’re using it for isn’t an essential design element, but something which can fail gracefully.

    CodePen from this video: https://codepen.io/kevinpowell/pen/bvWrEV
    Clip-path website: https://bennettfeely.com/clippy/
    Clip-path browser support: https://caniuse.com/search=clip-path

    I have a newsletter! https://www.kevinpowell.co/newsletter

    New to Sass, or want to step up your game with it? I’ve got a course just for you: https://www.kevinpowell.co/learn-sass

    My Code Editor: VS Code – https://code.visualstudio.com/

    How my browser refreshes when I save: https://youtu.be/h24noHYsuGc

    Support me on Patreon: https://www.patreon.com/kevinpowell

    I’m on some other places on the internet too!

    If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

    Instagram: https://www.instagram.com/kevinpowell.co/
    Twitter: https://twitter.com/KevinJPowell
    Codepen: https://codepen.io/kevinpowell/
    Github: https://github.com/kevin-powell

CSS clip-path Property

  • Tác giả: www.w3schools.com
  • Đánh giá: 4 ⭐ ( 4959 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

clip-path | CSS-Tricks

  • Tác giả: css-tricks.com
  • Đánh giá: 3 ⭐ ( 7247 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away.

Introduction to Clipping Using clip-path in CSS

  • Tác giả: www.digitalocean.com
  • Đánh giá: 5 ⭐ ( 2877 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn how to transform the shape of images, SVGs and just about anything using the clip-path property.

clip-path – CSS: Cascading Style Sheets

  • Tác giả: developer.mozilla.org
  • Đánh giá: 4 ⭐ ( 2946 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Understanding Clip Path in CSS

  • Tác giả: ishadeed.com
  • Đánh giá: 3 ⭐ ( 9588 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: An introduction about CSS clip-path, how it works, with example and use-cases.

Tìm hiểu về clip-path trong CSS

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 7106 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Introduction

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Lỗi chuyển đổi varchar thành số trong SQL Server - chuyển đổi varchar thành số trong sql