Cách tạo các cạnh xiên với CSS
Trong bài đăng này, chúng ta sẽ xem xét làm thế nào chúng ta có thể tạo hiệu ứng cạnh góc (theo chiều ngang) trên trang web. Về cơ bản, nó trông giống như thế này:
Có một cạnh hơi góc cạnh sẽ làm cho bố cục web của chúng tôi trông bớt cứng nhắc và buồn tẻ. Để thực hiện thủ thuật này, chúng tôi sẽ sử dụng yếu tố giả ::trước và ::sau và Chuyển đổi CSS3.
Sử dụng các yếu tố giả
Kỹ thuật này sử dụng các yếu tố giả ::trước và ::sau để góc các yếu tố. Trong ví dụ này, chúng tôi sẽ điều chỉnh cạnh dưới.
.khối chiều cao: 400px; chiều rộng: 100%; vị trí: tương đối; nền: gradient tuyến tính (bên phải, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); .block :: after content: "; width: 100%; height: 100%; vị trí: tuyệt đối; nền: kế thừa; z-index: -1; bottom: 0; Transform-origin: left bottom; Transform: skewY (3đ);
Hãy tóm tắt lại.
Các biến đổi nguồn gốc chỉ định tọa độ của phần tử mà chúng ta muốn chuyển đổi. Trong ví dụ trên, chúng tôi đã chỉ định phía dưới bên trái sẽ đặt tọa độ bắt đầu ở phía dưới bên trái của khối.
Các biến đổi: xiên (3deg); làm cho ::sau khối nghiêng hoặc góc ở 3 độ. Vì chúng tôi đã chỉ định tọa độ bắt đầu là dưới cùng bên trái, phía dưới bên phải của khối tăng 3 độ. Nếu chúng ta trao đổi biến đổi nguồn gốc đến ở dưới bên phải và góc dưới bên trái sẽ được nâng lên 3 độ thay vào đó.
Bạn có thể thêm một nền màu hoặc độ dốc rắn để xem kết quả.
Làm cho nó dễ dàng hơn với Sass Mixin
Để làm cho điều này dễ dàng hơn, tôi đã tạo ra một mixin Sass để thêm các cạnh góc cạnh, trừ đi những cơn đau đầu khi xử lý sự phức tạp của các quy tắc phong cách. Với mixin sau, bạn có thể nhanh chóng chỉ định bên - trên cùng bên trái, trên cùng bên phải, dưới cùng bên trái hoặc dưới cùng bên phải - để nghiêng.
@mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; vị trí: tương đối; nền: gradient tuyến tính (bên phải, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: trước, & :: sau nội dung: "; chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; nền: kế thừa; z-index: -1; quá trình: dễ dàng tất cả .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; Transform-origin: right top; Transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; Transform-origin: left top; Transform: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; Transform-origin: right bottom; Transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; Transform-origin: left bottom; biến đổi: skewY ($ angle-btm);
Có bốn biến trong mixin. Hai biến đầu tiên, $ pos-top và $ góc trên, chỉ định la phối hợp bắt đầu hàng đầu và trình độ. Hai biến sau chỉ định danh từ: Tọa độ và trình độ cho dưới cùng bên.
Nếu bạn điền vào tất cả bốn biến, bạn có thể nghiêng cả hai bên - trên và dưới - của phần tử.
Sử dụng Sass @ bao gồm cú pháp để chèn mixin vào một phần tử. Bạn có thể xem các ví dụ dưới đây:
Để thêm cạnh lệch trên cùng bên trái bên:
.khối @inc loại góc cạnh (topleft, 3deg);
Để thêm cạnh lệch góc phải ở phía dưới bên:
.khối @include angle-edge (bottomright, 3deg);
Để thêm cạnh lệch trên cùng bên trái và góc phải ở phía dưới bên:
.khối @include angle-edge (topleft, 3deg, bottomright, 3deg);
Dưới đây là bản demo với các mixins được áp dụng. Thay đổi hộp chọn để chuyển sang kiểu khác.
Đó là nó!
