Cách tạo hiệu ứng tuyệt vời với hình dạng CSS

Sep 16, 2025

Cách

Các nhà phát triển frontend có xu hướng suy nghĩ trong các hình chữ nhật; Hình chữ nhật bên trong hình chữ nhật bên trong hình chữ nhật bên trong hình chữ nhật. Chúng tôi có thể sử dụng các thủ thuật với Biên giới để tạo ra các vòng tròn hoặc hình tam giác, nhưng thực sự chúng vẫn chỉ là các hộp hình chữ nhật trong ngụy trang. Vâng, đây là để thay đổi với Css. Hình dạng, A. W3C. Khuyến nghị ứng viên sẽ thay đổi cách bạn nghĩ.

Ưu đãi Giáng sinh: Tiết kiệm tới 47% trên một đăng ký vào Tạp chí Net

Hình dạng CSS cho phép bạn tạo các hình dạng hình học bằng cách sử dụng các chức năng hình dạng: Circle (), Ellipsis (), Inset () và Polygon () và áp dụng chúng cho các phần tử hoặc hiệu ứng như cắt và bộ lọc. Hơn nữa, các hình dạng có thể ảnh hưởng đến dòng chảy của nội dung, cho phép bạn bọc văn bản gọn gàng xung quanh các tính năng như Avatar tròn.

Có lẽ hàm hình dạng mạnh mẽ nhất là đa giác () vì nó cho phép bạn tạo các hình dạng tùy ý phức tạp bằng cách sử dụng các điểm không giới hạn được xác định bằng các cặp phối hợp. Nếu bạn đã sử dụng Svg. , Điều này sẽ quen thuộc với bạn.

Trong hướng dẫn này, chúng tôi sẽ sử dụng đa giác với thuộc tính Clip-Path để cắt một hình dạng hình học khỏi văn bản của chúng tôi để chỉ có khu vực được đặt trong đa giác. Chúng tôi cũng sẽ thêm một số chuyển đổi đơn giản để mang lại hiệu ứng cho cuộc sống. Bạn có thể lấy mã cho mỗi bước trong repo này từ GitHub, ở đây .

01. Bắt đầu với HTML

Đầu tiên, hãy chuẩn bị HTML của chúng tôi. Chúng tôi chỉ cần một & lt; div & gt; , của chúng tôi .kẹp Lớp và văn bản của chúng tôi, nhưng như chúng tôi sẽ sử dụng các yếu tố giả cho hiệu ứng này, chúng tôi cũng sẽ thêm một thuộc tính có cùng giá trị với văn bản để chúng tôi có thể đọc nó vào CSS thay vì mã hóa cứng.

 & lt; div class = "clip" dữ liệu-nội dung = "một bản demo cắt" & gt;
Một bản demo cắt
& lt; / div & gt;

Tiếp theo, chúng tôi muốn làm cho nó lấp đầy màn hình và căn chỉnh trung tâm chết văn bản - chúng ta có thể sử dụng một số Flexbox. Phép thuật cho việc này. Hãy theo phong cách và kích thước văn bản.

 .Clip {
// Điền vào màn hình
Vị trí: Tuyệt đối;
Top: 0;
Trái: 0;
Chiều rộng: 100%;
Chiều cao: 100%;
// căn chỉnh
Hiển thị: Flex; // sử dụng flex để căn chỉnh
Nội dung biện minh: Trung tâm; // Căn chỉnh ngang
Căn chỉnh các mặt hàng: trung tâm; // căn chỉnh dọc.
// Kiểu dáng văn bản.
Font-Family: 'Làm việc Sans', Arial, Helvetica, Sans-serif; // làm việc sans có sẵn từ phông chữ google
Trọng lượng phông chữ: 800;
Kích thước phông chữ: 8rem;
Text-Căn chỉnh: Trung tâm;
Chuyển đổi văn bản: Uppercase;
}

02. Thêm một số phong cách

Bây giờ chúng ta có thể phong cách ::trước và ::sau Các yếu tố giả, với mỗi lớp trở thành một lớp trên đầu văn bản. Theo mặc định, ::sau sẽ có chỉ số Z cao nhất. Tiện dụng attr () Bộ chọn sẽ đọc giá trị của chúng tôi Dữ liệu-Nội dung. thuộc tính.

Các yếu tố giả sẽ chia sẻ các thuộc tính vị trí và flexbox, để chúng tôi có thể cấu trúc lại CSS của chúng tôi một chút và tận dụng sức mạnh của SCS để giữ cho biểu định kiểu của chúng tôi gọn gàng. Kiểu dáng phông chữ sẽ được thừa hưởng. Đang sử dụng ... Để biểu thị các thuộc tính chúng ta đã được bảo hiểm.

 .Clip {
...
// bản thân vị trí (& amp;) và các yếu tố giả (trước / sau)
& amp ;,
& amp; :: trước,
& amp; :: sau {
  Vị trí: Tuyệt đối;
  Top: 0;
  Trái: 0;
  Chiều rộng: 100%;
  Chiều cao: 100%;
  Hiển thị: Flex; // sử dụng flex để căn chỉnh
  Nội dung biện minh: Trung tâm; // Căn chỉnh ngang
  Căn chỉnh các mặt hàng: trung tâm; // căn chỉnh dọc.
Không thể
& amp; :: trước,
& amp; :: sau {
  Nội dung: attr (nội dung dữ liệu); // Sử dụng giá trị thuộc tính làm nội dung
Không thể
}

Kết quả trong trình duyệt sẽ giống hệt nhau, vì các yếu tố giả đang ngồi trực tiếp trên đầu văn bản. Bạn có thể sửa đổi phong cách của họ trong Những công cụ của nhà phát triển để xem cách chúng được xếp lớp.

03. Đặt hình nền và màu sắc

Thời gian để cung cấp cho mỗi lớp một màu sắc và nền khác nhau - chúng ta hãy đi theo một số màu sắc đậm, trên xu hướng, neon mà chúng ta đã xác định trước là các biến. Chúng ta cũng có thể buộc văn bản bọc nhiều dòng bằng cách sử dụng thủ thuật đệm CSS thay vì thêm chúng vào HTML.

Điều này rất hữu ích như chúng ta phải sử dụng hai loại vỡ dòng khác nhau: & lt; br & gt; Bên trong & lt; div & gt; và càng tối nghĩa \ A. trong thuộc tính.

 .Clip {
...
& amp ;,
& amp; :: trước,
& amp; :: sau {
  Đệm: 0 50%;
  Kích thước hộp: Hộp biên giới;
Không thể
& amp; :: trước {
  Màu sắc: $ trắng;
  Bối cảnh: $ màu hồng;
Không thể
& amp; :: sau {
  Màu sắc: $ PINK;
  Bối cảnh: $ Blue;
Không thể
}

Trick Padding hoạt động bằng cách cung cấp độ rộng ngang của văn bản Zero, buộc trình duyệt để bọc từng từ vào một dòng mới.

04. clip văn bản

Thời gian cho một chút thú vị - chúng tôi đã sẵn sàng để bắt đầu cắt văn bản của chúng tôi. Chúng ta sẽ tạo một clip chéo, cắt màn hình thành hai hình tam giác từ dưới cùng bên trái sang trên cùng bên phải.

Các ::trước Yếu tố giả sẽ chỉ được nhìn thấy ở tam giác trên cùng bên trái và ::sau Yếu tố giả sẽ chỉ được nhìn thấy trong tam giác dưới tay phải. Đây là mã để đạt được điều đó:

 .Clip {
...
& amp; :: trước {
  Clip-Path: Polygon (0 0, 100% 0, 0 100%, 0 100%);
Không thể
& amp; :: sau {
  Clip-Path: Polygon (100% 0, 100% 100%, 0 100%, 100% 0);
Không thể
}

Điều này tạo ra đa giác với bốn điểm. Mỗi điểm được mô tả bởi một cặp phối hợp; chỉ đơn giản là một giá trị x (trái sang phải) và y (từ trên xuống dưới). Giá trị có thể là tuyệt đối (ví dụ: px) hoặc tương đối (ví dụ:%). Các điểm được tham chiếu ở trên cùng bên trái, vì vậy các điểm tại 100% 100% đang ở dưới cùng bên phải.

Tưởng tượng các dòng kết nối từng điểm theo thứ tự chúng được liệt kê để tạo thành các hình dạng. bên trong ::trước Đa giác Nó bắt đầu ở trên cùng bên trái (0 0) , di chuyển trên màn hình lên trên cùng bên phải (100% 0) , và sau đó xuống dưới cùng bên trái (0 100%) .

Hy vọng bạn sẽ thấy văn bản cắt bỏ của bạn bây giờ. Thay đổi kích thước trình duyệt và bạn sẽ thấy clipping phản ứng tương ứng.

Nếu bạn đang sử dụng Chrome, có lẽ bạn sẽ thấy một số vấn đề sơn lại trong khi thay đổi kích thước, gây ra bởi các lớp tổng hợp của Chrome. Thật không may, vì demo là toàn màn hình, khuyến nghị sẽ thay đổi: biến đổi tài sản và Chuyển đổi: Translatez (0) Hack không khắc phục điều này. Tuy nhiên, nếu bạn chuyển đổi .kẹp đến Vị trí: Đã sửa; Nó hoạt động.

 Clip {
& amp ;,
& amp; :: trước,
& amp; :: sau {
  Vị trí: Đã sửa;
Không thể
}

Hãy nhớ rằng Chrome đang cố gắng hữu ích, và cách giải quyết này sẽ có tác động đến hiệu suất. Hãy chắc chắn để thực hiện hồ sơ khi làm những việc như thế này trong sản xuất.

05. Thêm chuyển tiếp

Bây giờ chúng ta đã có văn bản cắt bỏ của chúng tôi, hãy mang nó đến với cuộc sống với một số chuyển tiếp. Tin tốt là bạn có thể chỉ cần chuyển đổi clip-path. tài sản để trình duyệt thực hiện tất cả các công việc khó khăn. Hãy cho phép chuyển các chuyển tiếp trên các yếu tố giả, sau đó xác định bốn trạng thái khác nhau để chuyển đổi giữa.

Nhà nước 1: Đây là trạng thái ban đầu, vì vậy hãy tạo ba người khác

Thêm mỗi khối ở dưới cùng của CSS của bạn khi bạn đi, để bạn có thể thấy nó trông như thế nào.

Trạng thái 2: Di chuyển hình tam giác một chút để lộ nền

Điều này sẽ trông giống như lá cờ của Cộng hòa Congo. Loại bỏ 20 phần trăm từ đầu của từng tam giác đa giác sẽ thực hiện thủ thuật.

Nhà nước 3: Morph the Tam giác thành hình chữ nhật

Điều này tương tự như tricolor Pháp, ngược lại.

Những gì về cặp phối hợp thứ tư đó? Vâng, đây là nơi nó có ích trong hữu ích. Nó hóa ra sự chuyển đổi clip-path. Chỉ hoạt động nếu chức năng hình dạng được sử dụng là như nhau (vì vậy đa giác & gt; đa giác) và số lượng điểm được sử dụng là như nhau - trình duyệt sẽ chuyển đổi từng điểm riêng lẻ. Đó là lý do tại sao chúng ta có điểm ẩn thứ tư - nó cho phép chúng ta chuyển đổi liền mạch khỏi một hình tam giác thành một hình chữ nhật, chúng ta chỉ tiết lộ rằng điểm thứ tư khi chúng ta cần nó.

 .Clip {
& amp; :: trước {
  Clip-Path: Polygon (0 0, 40% 0, 40% 100%, 0 100%);
Không thể
& amp; :: sau {
  Clip-Path: Polygon (100% 0, 100% 100%, 60% 100%, 60% 0);
Không thể
}

Trạng thái 4: Xoay những con đa giác đó

Bám sát chủ đề cờ của chúng tôi, điều này giống như 'Tôi yêu cầu kéo' trong thế giới tín hiệu cờ hàng hải.

Ở đây chúng ta đang vặn các đa giác để chúng vượt qua trung tâm và tạo thành hai hình tam giác mỗi hình tam giác. Đây là khi quá trình chuyển đổi có thể giúp bạn hiểu các cặp phối hợp. Bằng cách thực sự làm chậm quá trình chuyển đổi, bạn có thể thấy cách mỗi điểm di chuyển trên màn hình đến vị trí mới của nó và bạn bắt đầu hiểu cách đặt hàng của các cặp ảnh hưởng đến quá trình chuyển đổi. Nó thực sự cung cấp cho bạn khá nhiều quyền kiểm soát về quá trình chuyển đổi.

 .Clip {
& amp; :: trước {
  Clip-Path: Polygon (100% 0, 0 0, 100% 100%, 0 100%);
Không thể
& amp; :: sau {
  Clip-Path: Polygon (100% 0, 100% 100%, 0 0, 0 100%);
Không thể
}

Gói (lại

Tất cả chúng ta đều đặt nhưng chúng ta chưa thể thay đổi trạng thái, nghĩa là bạn không thể thấy sự chuyển đổi trong hành động. Có nhiều cách để đạt được điều này, vì vậy nó tùy thuộc vào bạn. Trong repo và codepen, tôi đã sử dụng một giải pháp không có JavaScript 100% với các nút radio ẩn và bộ chọn tiếng Anh chung - hãy xem. Bạn cũng có thể kiểm tra Codepen của hướng dẫn này đây .

Bài viết này ban đầu xuất hiện trong số 288 của mạng lưới , Tạp chí cho các nhà thiết kế và nhà phát triển web chuyên nghiệp - cung cấp các xu hướng, công nghệ và kỹ thuật mới nhất mới nhất. MUA VẤN ĐỀ 298 TẠI ĐÂY hoặc là Theo dõi mạng tại đây .

Ưu đãi Giáng sinh đặc biệt: Tiết kiệm tới 47% trên một đăng ký vào mạng cho bạn hoặc một người bạn cho Giáng sinh. Đó là một ưu đãi hạn chế, vì vậy hãy di chuyển nhanh chóng ...

Những bài viết liên quan:

28 ví dụ nổi bật về CSS
Cách tạo bố cục kim tự tháp với hình CSS
Thủ thuật CSS để cách mạng hóa bố cục web của bạn

Cách tạo hiệu ứng tuyệt vời với hình dạng CSS

01. Bắt đầu với HTML

02. Thêm một số phong cách

03. Đặt hình nền và màu sắc

04. clip văn bản

05. Thêm chuyển tiếp

Gói (lại

Cách - Các bài báo phổ biến nhất

10 cách để xây dựng môi trường thế giới 3D tốt hơn

Làm thế nào để vẽ một con mèo

Xây dựng các ứng dụng di động đa nền tảng với Flutter của Google

Sơn nước gợn sóng trong dầu

Cách ảnh hưởng đến Xếp hạng Google với nội dung của bạn

Cách vẽ Zombie trong Paint Clip Studio

Tạo một hình nền poly thấp trong C4D

Khám phá mã sáng tạo với P5.js

Thể loại