Trình tạo tam giác css với bóng
|
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 Show
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óngMộ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. Đâ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.
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
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ắtGiả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ố |
