CSS tam giác vuông

Trong bài đăng này, chúng ta sẽ xem các phương pháp khác nhau để vẽ hình tam giác trong CSS. Chúng tôi sẽ tập trung vào ba đặc biệt. phương pháp truyền thống sử dụng đường viền và hai tùy chọn hiện đại hơn với clip-path và linear-gradient[]

Sử dụng border

Đây là cách vẽ hình tam giác "cổ điển" trong CSS và có vẻ là cách phổ biến nhất cho đến nay. Nó bao gồm có một đường viền màu duy nhất, để các đường viền khác trong suốt. Đây là các bước để đạt được nó

1. Đặt một width và height của 0
2. Đặt màu đường viền thành trong suốt
3. Đặt đường viền trên cùng thành 0
4. Đặt đường viền bên thành một nửa chiều rộng
5. Đặt đường viền dưới cùng để có chiều cao đầy đủ
6. Đặt màu cho đường viền dưới cùng

Nghe có vẻ không dễ, nhưng nó tương đối đơn giản

Tùy thuộc vào vị trí mà bạn muốn tam giác trỏ đến, bạn sẽ điều chỉnh kích thước và màu sắc của các đường viền tương ứng

Phương pháp này đã xuất hiện từ lâu và nó là một "hack. " Nó hoạt động trong tất cả các trình duyệt và nó sẽ tiếp tục hoạt động trong các trình duyệt trong tương lai, nhưng đó không phải là cách sử dụng đường viền

Do đó, nó không hoạt động tốt khi chúng tôi cố gắng thêm nội dung. Nó không chia tỷ lệ chính xác, vì vậy cần phải biết kích thước vùng chứa và các giá trị cần phải cụ thể cho tam giác đó

Ưu điểm của phương pháp này

• Hỗ trợ. nó hoạt động trong mọi trình duyệt [ngay cả các phiên bản IE cũ]
• Giản dị. thật dễ dàng để lập trình, như trong ví dụ trên

Nhược điểm của phương pháp này

• Khó bảo trì. thay đổi kích thước yêu cầu thay đổi mã
• thiết kế cứng nhắc. nếu chúng tôi thêm nội dung, kết quả có thể sẽ không như mong đợi

Biên giới sẽ hoạt động rất tốt trong một tình huống cụ thể. hình tam giác trống với kích thước cố định. Bên ngoài đó, vấn đề phát sinh. Chúng ta phải nhớ rằng đây là một giải pháp hack từ thời không có lựa chọn nào khác

Sử dụng background-image

Chúng tôi có thể sử dụng một SVG nội tuyến trong CSS, nó sẽ hoạt động tốt. nhưng nó sẽ gian lận, vì chúng tôi sẽ sử dụng một hình ảnh thay vì CSS

Thay vào đó, hãy tạo hình tam giác bằng cách sử dụng background-image nhưng không có hình ảnh thực tế. Chúng ta có thể đạt được điều đó bằng cách thêm hai gradient tuyến tính. Một cho mỗi cạnh của tam giác

ý tưởng sẽ là để làm điều này

1. Thêm một linear-gradient về phía góc dưới cùng bên phải [trong suốt sang màu đỏ với thay đổi cứng ở mức 50%]
2. Thêm một linear-gradient về phía góc trên cùng bên phải [màu đỏ thành trong suốt với thay đổi cứng ở mức 50%]
3. Đặt kích thước của cả linear-gradient thành 50% chiều rộng
4. Đặt một linear-gradient ở đầu và một cái khác ở cuối thùng chứa

Điều này nghe có vẻ phức tạp hơn các đường viền. Và tôi sẽ không nói dối, đó là. nhưng không nhiều. Đây là một lược đồ về giao diện của nó

Kết quả tương tự về mặt đồ họa với hình tam giác được tạo với các đường viền

Nhưng nó có một số điểm khác biệt chính. chủ yếu, giải pháp này phản ứng nhanh với những thay đổi về kích thước của vùng chứa. Không cần tính toán bất cứ điều gì hoặc sử dụng các biến CSS

Ngoài ra, vì vùng chứa vẫn là hình chữ nhật nên việc định dạng, định vị và tạo kiểu cho văn bản trong hình tam giác sẽ "tự nhiên" hơn. "

Ưu điểm của phương pháp này

• Hỗ trợ. nó hoạt động ngay cả trong các trình duyệt cũ hơn [IE10 trở lên. ]
• Phản ứng nhanh nhẹn. nó điều chỉnh theo kích thước của thùng chứa
• Hoàn hảo cho văn bản. Hình dạng vùng chứa không bị ảnh hưởng nên việc thêm văn bản hoặc nội dung khác rất đơn giản

Nhược điểm của phương pháp này

• Phức tạp. tùy chọn này có lẽ là tùy chọn phức tạp nhất để phát triển
• Khó khăn cho các tùy chọn. ví dụ, có một gradient tuyến tính phức tạp hơn [nhưng khả thi. ]

Sử dụng clip-path

clip-path là "mới nhất" trong ba. Và tôi đặt "mới nhất" giữa các dấu ngoặc kép vì nó đã được hỗ trợ hơn 10 năm trong Firefox và Chrome [có tiền tố] và hỗ trợ của nó bắt đầu cùng thời điểm với linear-gradient[]

Với clip-path, bạn có thể xác định phần cắt sẽ là phần hiển thị duy nhất của phần tử. Để vẽ một hình tam giác, chúng ta chỉ cần xác định một đa giác có ba điểm như trong hình

Mã để đạt được điều này cực kỳ đơn giản nhờ hàm linear-gradient[]5. Chúng tôi chỉ cần tọa độ dưới cùng bên trái [0% 100%], giữa trên cùng [50% 0%] và dưới cùng bên phải [100% 100%] và chúng tôi đã hoàn thành

Một điều quan trọng cần nhớ là mọi thứ bên ngoài khu vực bị cắt về cơ bản đã biến mất. Và điều đó không chỉ bao gồm nội dung mà còn cả các yếu tố "bên ngoài" như bóng đổ, đường viền hoặc đường viền. [Adam Kuhn có một giải pháp tuyệt vời cho việc này. ]

Đa giác chỉ là phần nổi của tảng băng chìm. hình tròn, hình elip và với sự hỗ trợ mới nhất cho linear-gradient[]7, về cơ bản, bất kỳ hình dạng nào bạn có thể tưởng tượng đều có thể thực hiện được với clip-path

Ưu điểm của phương pháp này

• Dễ dàng. clip-path là công cụ thay đổi cuộc chơi cho CSS. Nó mạnh mẽ và linh hoạt, cho phép mọi hình dạng và không chỉ hình tam giác
• Phản ứng nhanh nhẹn. nó điều chỉnh theo kích thước của vùng chứa và những thay đổi của nó
• có thể tùy chỉnh. độ dốc và hiệu ứng không phải là vấn đề miễn là chúng nằm trong khu vực có thể nhìn thấy

Nhược điểm của phương pháp này

• Hỗ trợ. không có phiên bản IE nào hỗ trợ clip-path. Không phải tất cả các chức năng đều được hỗ trợ trên bảng [tuy nhiên, ____15]
• "Dễ mắc sai lầm". mọi thứ bên ngoài khu vực đã cắt đã biến mất, điều này có thể dẫn đến kết quả không mong muốn

Phần kết luận

CSS đã được cải thiện theo thời gian và hiện cung cấp các công cụ vẽ — chẳng hạn như clip-path hoặc background-image— để tạo hình tam giác [hoặc hình dạng] đơn giản hơn, linh hoạt hơn và dễ bảo trì hơn so với sử dụng đường viền

Thật hợp lý khi chuyển từ sử dụng các đường viền cứng nhắc hơn và bắt đầu sử dụng các công cụ thích hợp cho nhiệm vụ. Giống như cách chúng ta không đóng đinh vào tường bằng tuốc nơ vít. chúng tôi sẽ sử dụng một cái búa

Tuy nhiên, mỗi phương pháp đều có ưu và nhược điểm của nó, và có những tình huống mà một phương pháp có thể tốt hơn những phương pháp khác. Nếu đường viền hoạt động cho những gì bạn cần, hãy sử dụng chúng. Nhưng phương pháp đó sẽ mai một theo thời gian là điều đương nhiên.

Chúng tôi đã chuyển từ bố cục bảng sang vùng chứa nổi và sau đó từ vùng chứa nổi sang Flexbox và Grid. Sẽ hợp lý hơn nếu chuyển từ sử dụng đường viền sang các phương pháp mới phù hợp hơn cho công việc

Làm cách nào để thêm mũi tên trong CSS?

Làm cách nào để thêm mũi tên vào div trong CSS?

Làm cách nào để tạo hình thang trong CSS?