Làm thế nào để tạo một tam giác trong CSS: cách tiện lợi nhất

Rất thường các trang web hiện đại đẹp có chứa nhiều yếu tố đồ họa hấp dẫn. Trong số đó, hình học hình học đơn giản nhất được sử dụng làm hình tam giác, được sử dụng để thiết kế một tập hợp các phần tử. Ví dụ: Tôi sử dụng chúng như một con trỏ tới một đối tượng nhất định trên trang, để khách truy cập trang web chuyển sự chú ý của mình sang anh ta. Tất nhiên, chức năng chính của tam giác là trang trí, vì các khối có chứa chúng trở nên hiện đại và hấp dẫn hơn.

Không phải ai cũng biết làm thế nào để tạo ra các hình dạng như vậy bằng cách sử dụng các tờ kiểu dáng theo tầng và tự hỏi làm thế nào để tạo ra một hình tam giác trong CSS.

Ứng dụng trong thiết kế các trang web

Trong thiết kế web, tam giác được tìm thấy ở mọi nơi. Chúng tạo thành các mẹo, trình đơn, tất cả các loại phần tử của giao diện người dùng. Đôi khi chúng được sử dụng khi tạo ra một chỉ thị cho quá trình khởi động. Và nếu có thể làm mà không có chúng trước đây, bây giờ nó là không thể, và các nhà phát triển có nghĩa vụ phải thích ứng với yêu cầu như vậy. Xét cho cùng, ngày nay hình tam giác được tạo ra trong CSS là phần quan trọng nhất trong việc xây dựng mối liên kết lẫn nhau giữa các phần của giao diện và sự thống nhất thành một toàn bộ duy nhất.

Nhiều nghệ sĩ bố trí đang bối rối khi họ có được một bố cục, trong thiết kế của nó thường là một tam giác. Rốt lại, không có tài sản nào trực tiếp tạo ra hình học này. Trong thực tế, có một số phương pháp có sẵn để làm điều này.

Làm thế nào để tạo ra bằng cách sử dụng khung

Phương pháp đầu tiên cho phép bạn tạo một tam giác trong CSS là đường viền. Đó là sử dụng một khuôn khổ. Mặc dù biên giới được tạo ra bằng cách sử dụng thuộc tính border không liên quan trực tiếp đến tam giác, nó thường được sử dụng cho mục đích này.

Khi bạn chỉ định chiều cao và chiều rộng không của đối tượng, cũng như đặt một đường viền dày, bạn có thể thấy một hình vuông bao gồm bốn hình tam giác đều nhau. Bí quyết là bạn cần phải để lại chỉ các biên giới cần thiết, và phần còn lại để làm cho nó minh bạch. Và như vậy, nó biến ra một hình tam giác được vẽ bằng CSS theo đúng hướng và màu sắc.

Tạo các góc bằng cách sử dụng thuộc tính "border" là thuận tiện, bởi vì không cần phải vẽ một hình ảnh bằng cách sử dụng bất kỳ trình biên tập đồ hoạ nào. Các thông số của tam giác luôn luôn có thể được thay đổi trong mã. Và tiết kiệm thời gian cho nhà phát triển. Kết hợp chiều rộng khác nhau của khung, thật dễ dàng để có được một hình dạng. Để hiểu cách thức hoạt động này, bạn chỉ cần tạo ra một phần tử rỗng có chiều rộng bằng 0, chiều cao và một khung rất dày với các màu khác nhau ở mỗi bên. Vì vậy, làm cho ba mặt của bốn minh bạch, có được hình tam giác của các loại khác nhau:

• Hình tam giác, nhìn sang trái, có cạnh bằng nhau;
• Một hình tam giác nhìn sang trái và được làm phẳng;
• Tam giác dài, nhìn sang trái;
• Một tam giác vuông phải với góc phải;
• Tam giác nhìn xuống;
• Tam giác nhìn lên;
• Một tam giác nhìn về phía bên phải và nhiều giống khác.

Sử dụng các giám ngục giả

Với những kỹ thuật này, bạn có thể tạo góc trong lời khuyên và gợi ý bật lên. Để đính kèm một tam giác vào khối thông qua CSS, hầu hết các lập trình viên đều sử dụng các phần tử giả như sau và trước đó. Nếu bạn sử dụng chúng với nhau, bạn có thể vẽ một tam giác trong CSS có đột qu stroke.

Bằng cách kết hợp chúng, các nhà phát triển tạo ra nhiều mũi tên đẹp bằng cách áp dụng vị trí: thuộc tính tương đối với phần tử gốc. Điều này được thực hiện sao cho các phần tử giả không di chuyển ra khỏi vị trí của chúng.

Những ưu điểm của việc sử dụng khung công tác CSS để tạo tam giác là:

• Chỉnh sửa nhanh chóng và dễ dàng kích thước và màu sắc sử dụng tài sản;
• Hỗ trợ tất cả các trình duyệt.

Nhược điểm:

• Bởi vì các khung được sử dụng, không có khả năng áp dụng gradients, shadows;
• Đôi khi người dùng nhìn vào các trang trong trình duyệt Firefox, độ trong suốt có thể không hoạt động, và điều này sẽ bóp méo hình ảnh.

Sử dụng hình ảnh đã hoàn thành

Cách tiếp theo để tạo hình tam giác là sử dụng một bức ảnh được mã hóa. Hình tam giác được vẽ trước trong trình biên tập đồ hoạ và được chuyển đổi thành một mã đặc biệt sử dụng các dịch vụ chuyên biệt.

Điểm cộng của phương pháp này là bạn có thể thực hiện một thiết kế rất đẹp với bóng, gradient và khung và sau đó chỉ cần mã tất cả. Và những hạn chế là không phải ai cũng biết các chương trình đồ hoạ tốt. Ngoài ra, nếu hình ảnh là rất lớn, sau đó dòng mã chỉ đơn giản là rất lớn. Điều này không tiện lợi cho nhà phát triển.

Một điểm khác biệt là việc sử dụng các trình duyệt Internert Explorer phiên bản cũ hơn. Trong họ, phương pháp này đơn giản sẽ không hoạt động.

Phương pháp đảo ngược vuông

Một cách là tạo ra CSS nghịch đảo. Cần có hai khối ở đây. Nhưng một số người sử dụng các phần tử giả.

Đầu tiên, một hình vuông được tạo ra. Nó sẽ là nội dung của phần tử quay. Sau đó nó được xoay 45 độ để làm cho nó giống như một viên kim cương. Sau đó, nó chuyển lên, và khối bên ngoài được ẩn bằng cách sử dụng tài sản tràn: ẩn. Giải pháp này cũng không phải là trình duyệt chéo, và đôi khi hình ảnh sẽ không được hiển thị như mong muốn.

Kết quả

Vì vậy, có rất nhiều phương pháp để tạo ra một hình tam giác. Nhưng làm thế nào để không bị lạc trong tất cả các thuộc tính CSS? Các thư mục trong trường hợp này sẽ luôn luôn giúp đỡ. Nó mô tả tất cả các thuộc tính của các tờ kiểu xếp tầng.

Đối với những người không muốn tham gia vào lập trình và xem thư mục CSS, có những người biên tập trực tuyến tạo các hình tam giác có kích thước và màu sắc phù hợp. Trong trình chỉnh sửa trực quan, người dùng chọn và điều chỉnh tất cả các tham số hình dạng. Chuyển đổi sang máy tạo tam giác mã CSS đặt trong một cửa sổ riêng biệt trực tiếp trên bay. Sau đó, mã được tạo ra chỉ đơn giản là chèn vào trang tính và điều chỉnh để thiết kế trang.