Cách tạo tam giác trong CSS
Có lẽ cách dễ nhất để thêm hình tam giác vào trang web là chỉ cần vẽ hình tam giác đó vào hình ảnh và thêm hình ảnh vào trang web. Có nhiều bí quyết để vẽ hình tam giác hoàn hảo và bạn có thể đọc cách thực hiện điều đó trong Photoshop trong bài viết này. Tạo hình tam giác trong Photoshop hoặc tải xuống gói hình tam giác miễn phí này cho Photoshop Show
Trong bài viết này tôi sẽ chỉ cho bạn cách tạo một hình tam giác bằng CSS & HTML Dưới đây là tổng quan về các phương pháp khác nhau mà tôi sẽ sử dụng
Sử dụng .triangle-up { border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green; border-top: 20px solid transparent; display: inline-block; }1 để tạo hình tam giác trong CSSNếu bạn đã tìm kiếm trên Internet cách tạo một tam giác CSS, thì có lẽ bạn đã thấy bài viết tuyệt vời này từ các thủ thuật CSS. Họ nhanh chóng giải thích cách tạo hình tam giác bằng thuộc tính CSS 1Hãy để tôi nhanh chóng giải thích Hãy xem xét đoạn mã HTML sau 6Và CSS
sẽ hiển thị như thế này Đây là CSS
Cái nào sẽ hiển thị dưới dạng Cách tạo một hình tam giác trong CSS bằng cách sử dụng .triangle-up { border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green; border-top: 20px solid transparent; display: inline-block; }3Và đây là một cách khác để tạo tam giác CSS. Chúng ta có thể sử dụng thuộc tính 3. Thuộc tính này hoạt động giống như clipping mask trong Photoshop. Về cơ bản, bạn chỉ có thể hiển thị các phần của phần tử HTML 3 chấp nhận một số loại giá trị từ tham chiếu đến tệp SVG đến định nghĩa đa giác nội tuyến. Khi nói về đường dẫn clip SVG, tôi khuyên bạn nên đọc blog của Sara Soueidan vì cô ấy là một bậc thầy thực sự trong lĩnh vực đó, imhoHãy xem cách nó hoạt động để tạo ra một hình tam giác Đây là CSS 0Đó là?. ? Đúng vậy đó là nó. Chúng tôi tạo tam giác bằng cách xác định nó là một đa giác có 3 góc. Đoạn mã này sẽ tạo ra một tam giác cân có đáy là 40 pixel và chiều cao là 40 pixel, các bạn dễ hình dung cách thay đổi Tôi nghĩ rằng đây là phương pháp cho phép kiểm soát nhiều nhất Sự kết luậnCó rất nhiều công dụng cho hình tam giác. Từ mũi tên đến ghim bản đồ, từ điểm đánh dấu menu đến thành phần biểu đồ Bây giờ bạn đã biết cách tạo một hình tam giác bằng CSS Nếu bạn thích hướng dẫn này, hãy nhớ xem Hướng dẫn cách thực hiện đầy đủ của chúng tôi để tạo và sử dụng Hình ảnh vòng tròn CSS hoặc xem cách tạo biểu đồ thanh chỉ CSS trong HTML |