Hình tam giác được sử dụng phổ biến trong các giao diện. Thường được sử dụng để chỉ các trang hiện tại và tương tự. Mặc dù chúng tôi có thể sử dụng PNG [hoặc JPG/GIF] nhưng tôi không phải là người thích điều đó vì không có sự độc lập về độ phân giải [tôi không muốn làm lại nội dung đồ họa cho độ phân giải thấp/hi mỗi khi có thay đổi đối với chúng
Nếu có thể, bạn nên tạo các phần tử giao diện người dùng nhỏ như thế này bằng CSS. Tuy nhiên có những hạn chế. Trong trường hợp đó, SVG sẽ hỗ trợ chúng tôi
Tùy chọn 1 – Đường viền và bội số CSS cho hiệu ứng đổ bóng
Một cách phổ biến để tạo các phần tử giao diện hình tam giác là sử dụng các đường viền. Cách dễ nhất để tạo CSS theo cách này là sử dụng công cụ trực tuyến này. http. // ứng dụng. eky. hk/css-triangle-generator/
Điều này cung cấp CSS. Sau đó, bạn có thể thêm phần này vào phần tử nội tuyến [e. g. span
, b
,
Đây là một ví dụ [SCSS] tôi đã mô phỏng tại codepen. io minh họa một ví dụ sử dụng cả hai cho một tam giác có viền
Nó cũng được đề xuất sử dụng.
______13 để khử răng cưa tốt hơn trong trình duyệt webkit – mặc dù số dặm của bạn có thể thay đổi.
Ưu điểm – không cần đánh dấu thêm, nhẹ [không cần hình ảnh]
Nhược điểm – không hoàn hảo để tạo các kiểu trực quan nội bộ nếu bạn đang sử dụng nó với một phần tử có nội dung cuộn mà bạn cần áp dụng tràn. ẩn để
Tùy chọn 2 - Hộp CSS, được xoay bằng biến đổi
Điều này tương tự như tùy chọn trên [là CSS thuần túy] nhưng thêm biến đổi CSS3 vào hỗn hợp. Sẽ không hoạt động trên các trình duyệt ốm yếu nhưng không tệ ở những nơi khác. Các vấn đề/giới hạn về kiểu hình ảnh bên trong giống như trước đây, nhưng việc tạo cạnh có viền rất dễ dàng vì bạn có thể thêm đường viền cho chỉ hai cạnh liền kề và sau đó xoay nó
Tuy nhiên, một dấu hiệu bổ sung đối với kỹ thuật này là hình tam giác phải bằng nhau [vì nó được tạo từ nửa hình vuông]. Kỹ thuật dựa trên đường viền không bị giới hạn này
Đây là một ví dụ [SCSS]
Tùy chọn 3 – sử dụng hình ảnh SVG
Đây là một cách để có được chính xác những gì bạn cần. Đối với một thành phần giao diện người dùng nhỏ như thế này, có lẽ tốt nhất là bạn nên đặt nội tuyến cho nó. Để biết thêm thông tin về thực hành đó, hãy xem bài đăng liên quan này
Một điều tuyệt vời khác khi làm điều đó với SVG là nó có thể mở rộng theo kích thước vùng chứa [trong đó các phiên bản trước khác sẽ không]. Do đó, kích thước của vùng chứa được đặt bằng ems và thứ gì đó 'lên chuỗi' thay đổi, SVG sẽ chỉ hoạt động [miễn là SVG được tạo thành chiều cao và chiều rộng 100% nguyên bản hoặc được đặt theo cách đó bằng CSS]
Tùy chọn 4 – Sử dụng phông chữ biểu tượng [tốt nhất]
Nếu bạn muốn độ sắc nét của SVG và tính linh hoạt của màu đường viền, hãy sử dụng phông chữ biểu tượng. Bằng cách đó, bạn có thể tạo hình tam giác theo bất kỳ cách nào bạn cần [ví dụ: tam giác cân] và sau đó sử dụng
0 và 1 để thêm bóng đổ – thật đẹp. Đó là cách tôi đã làm gần đây vì nó dường như mang lại giải pháp tốt nhất cho mọi vấn đề. Cần tạo một phông chữ biểu tượng?Một số vấn đề phổ biến để giải quyết các hình tam giác/hình dạng độc lập
Hãy nhớ rằng bóng hộp sẽ không hoạt động xung quanh chúng [nó thêm bóng vào bên ngoài hộp vô hình định vị phần tử]
- 2 mới hơn tôn trọng đường viền của đối tượng [vì nó được áp dụng sau khi trang được hiển thị, vì vậy hãy lưu ý đến các cân nhắc về hiệu suất – mẹo ít mờ hơn đồng nghĩa với ít căng thẳng hơn trên thiết bị/trình duyệt] rất tốt cho đổ bóng nhưng không thể sử dụng được
Ngoài ra, trong khi tình hình có khả năng được cải thiện, vì các bộ lọc sau khi toàn bộ trang đã được lưu dưới dạng bitmap, tôi nhận được văn bản trông mờ trên các thành phần đã áp dụng bóng đổ
Nếu bài đăng này hữu ích, hãy nói lời cảm ơn với một ly cà phê. Mọi đóng góp đều giúp tôi tiếp tục. 🙏
CSS HiDPI SCSS SVG
Học cách sử dụng CSS hiệu quả, 'CSS bền bỉ' đã ra mắt
Giảm $5 TẠI ĐÂY ↠Viết và duy trì CSS mô-đun quy mô lớn và sử dụng công cụ hiện đại bao gồm PostCSS, Stylelint và Gulp
Trình tạo tam giác CSS. Mũi tên CSSTrình tạo tam giác CSS. Đường viền css tam giác trong suốt
Tam giác CSS demo
Thử nghiệmHướng đi
Màu BG
Kích thước xoay bóng
Kích thước tam giác
Cạnh đều Cân bằng Cân đều
Bề rộng
Bên trái
Đúng
Chiều cao
Đứng đầu
Đáy
Quay
BẬT TẮT
Quay
Bóng đổ
BẬT TẮT
Màu bóng
chân trời. Chiều dài
Vert. Chiều dài
Bán kính mờ
độ mờ
Tạo mã Xem trước Đặt lại
HTML
Điểm nổi bật
chọn tất cả
Sao chép và dán mã HTML vào giữa các thẻ nội dung của trang của bạn
CSS
Điểm nổi bật
chọn tất cả
Sao chép và dán mã CSS vào giữa các thẻ đầu trang của bạn
Xem trước Chỉnh sửa Mã Tải xuống Mã
Báo cáo sự cố