Cách vẽ dấu kiểm/đánh dấu bằng CSS

” phần tử chứa với một “ nhận dạng ” hoặc một “ lớp học ”:

< div nhận dạng = 'đánh dấu' >< / div >

Trong câu lệnh HTML ở trên, một “ div ” phần tử đã được thêm vào với id được khai báo là “ đánh dấu ”.

Trong khi tạo kiểu cho phần tử bằng thuộc tính CSS, hãy thêm “ nhận dạng ” bộ chọn để chỉ phần tử HTML và sau đó chỉ định các thuộc tính bên trong nó:

---

---

#đánh dấu
{
chuyển đổi: xoay ( 45 độ ) ;
chiều cao : 45px;
chiều rộng : 20px;
lề trái: năm mươi %;
viền-dưới: 9px màu xanh đậm đặc;
đường viền bên phải: 9px màu xanh đậm đặc;
}

Phần tử kiểu CSS ở trên có các thuộc tính sau:

• Các ' biến đổi: xoay (45deg) ” xoay các đường thẳng dọc và ngang theo cách tạo thành hình biểu tượng đánh dấu.
• Các ' chiều cao ” thuộc tính đặt chiều cao của biểu tượng đánh dấu thành “ 45px ”.
• Các ' chiều rộng ” tài sản làm nên biểu tượng “ 20px ' rộng.
• Các ' lề trái ” căn chỉnh biểu tượng đánh dấu vào giữa giao diện trang web.
• Sau đó, “ viền dưới ' Và ' biên giới bên phải ” thuộc tính đặt trọng số đường viền của cả hai dòng thành “ 9px ” và xác định “ ô liu xanh ” màu cho cả hai dòng tạo thành biểu tượng đánh dấu hoàn chỉnh.

Điều này sẽ tạo ra một dấu kiểm đơn giản màu xanh lá cây hoặc biểu tượng đánh dấu được hiển thị ở trung tâm của giao diện trang web “ 45px ' cao và ' 20px ' rộng:

Phương pháp 2: Chèn Dấu kiểm/Tick bằng Ký tự Unicode

Ngoài ra còn có một số ký tự Unicode tự động chèn các ký hiệu đánh dấu vào đầu ra mà không cần định kiểu và xác định giá trị tham số cho chúng. Chẳng hạn, ký tự Unicode “ U+2713 ” giúp thêm một biểu tượng đánh dấu đơn giản vào đầu ra. Tương tự, ký tự Unicode “ U+2713 ” giúp chèn biểu tượng đánh dấu nặng màu trắng vào đầu ra. Để tìm hiểu cách thêm các ký tự Unicode này vào tài liệu HTML thông qua hướng dẫn đầy đủ, hãy nhấp vào đây .

Phần kết luận

Có thể vẽ dấu kiểm hoặc biểu tượng dấu kiểm bằng cách trước tiên tạo phần tử HTML có id hoặc lớp, sau đó thêm bộ chọn id hoặc lớp trong phần tử kiểu CSS để chỉ phần tử đó. Để tạo hình dấu tích/dấu kiểm trên giao diện trang web, các thuộc tính CSS khác nhau như “ chiều cao ”, “ chiều rộng ”, “ quay ' Và ' màu sắc ” có thể được sử dụng tùy theo loại và kích thước của dấu kiểm mà người ta muốn. Blog này trình bày phương pháp vẽ dấu kiểm/đánh dấu bằng CSS.