วิธีการวาดเครื่องหมายถูก/ขีดโดยใช้ CSS

” องค์ประกอบคอนเทนเนอร์ด้วย “ รหัส ” หรือ “ ระดับ ”:

< แผนก รหัส = 'เครื่องหมายถูก' >< / แผนก >

ในคำสั่ง HTML ข้างต้น a “ แผนก ” องค์ประกอบถูกเพิ่มด้วย id ที่ประกาศเป็น “ เครื่องหมายถูก '.

ในขณะที่จัดรูปแบบองค์ประกอบโดยใช้คุณสมบัติ CSS ให้เพิ่ม ' รหัส ” ตัวเลือกเพื่ออ้างถึงองค์ประกอบ HTML จากนั้นระบุคุณสมบัติภายใน:

---

---

#เครื่องหมายถูก
{
แปลงร่าง: หมุน ( 45 องศา ) ;
ความสูง : 45px;
ความกว้าง : 20px;
ขอบซ้าย: ห้าสิบ %;
ขอบล่าง: 9px ทึบ darkolivegreen;
ขอบขวา: 9px solid darkolivegreen;
}

องค์ประกอบสไตล์ CSS ด้านบนมีคุณสมบัติดังต่อไปนี้:

• “ แปลงร่าง: หมุน (45deg) ” หมุนเส้นตรงแนวตั้งและแนวนอนในลักษณะที่ทำให้เป็นรูปร่างของสัญลักษณ์ขีด
• “ ความสูง ” คุณสมบัติกำหนดความสูงของเครื่องหมายขีดเป็น “ 45พิกเซล '.
• “ ความกว้าง ” คุณสมบัติทำให้สัญลักษณ์ “ 20px ' กว้าง.
• “ ขอบซ้าย คุณสมบัติ ” จัดตำแหน่งเครื่องหมายถูกให้อยู่กึ่งกลางของอินเทอร์เฟซของหน้าเว็บ
• หลังจากนั้น “ เส้นขอบด้านล่าง ' และ ' ขอบขวา ” คุณสมบัติตั้งค่าน้ำหนักเส้นขอบของทั้งสองบรรทัดเป็น “ 9px ” และกำหนด “ darkolivegreen ” สีสำหรับทั้งสองบรรทัดที่สร้างสัญลักษณ์ขีดที่สมบูรณ์

สิ่งนี้จะสร้างเครื่องหมายถูกหรือสัญลักษณ์ขีดสีเขียวที่แสดงตรงกลางอินเทอร์เฟซของหน้าเว็บ “ 45พิกเซล ” สูง และ “ 20px ' กว้าง:

วิธีที่ 2: การแทรกเครื่องหมายถูก/เครื่องหมายถูกโดยใช้อักขระ Unicode

นอกจากนี้ยังมีอักขระ Unicode บางตัวที่แทรกสัญลักษณ์เครื่องหมายขีดในเอาต์พุตโดยอัตโนมัติโดยไม่จำเป็นต้องจัดรูปแบบและกำหนดค่าพารามิเตอร์สำหรับอักขระเหล่านั้น ตัวอย่างเช่น อักขระ Unicode “ U+2713 ” ช่วยเพิ่มสัญลักษณ์ติ๊กอย่างง่ายในเอาต์พุต ในทำนองเดียวกัน อักขระ Unicode “ U+2713 ” ช่วยแทรกสัญลักษณ์ขีดหนักสีขาวในเอาต์พุต หากต้องการเรียนรู้วิธีเพิ่มอักขระ Unicode เหล่านี้ในเอกสาร HTML ผ่านคำแนะนำฉบับสมบูรณ์ ให้คลิก ที่นี่ .

บทสรุป

คุณสามารถวาดเครื่องหมายถูกหรือเครื่องหมายถูกได้โดยสร้างองค์ประกอบ HTML ที่มี id หรือคลาสก่อน แล้วจึงเพิ่มตัวเลือก id หรือ class ในองค์ประกอบสไตล์ CSS เพื่ออ้างถึงองค์ประกอบนั้น ในการสร้างรูปร่างของเครื่องหมายถูก/ขีดบนอินเทอร์เฟซของหน้าเว็บ คุณสมบัติของ CSS ต่างๆ เช่น “ ความสูง ”, “ ความกว้าง ”, “ หมุน ' และ ' สี ” ได้ตามประเภทและขนาดของเครื่องหมายที่ต้องการ บล็อกนี้สาธิตวิธีการวาดเครื่องหมายถูก/ติ๊กโดยใช้ CSS