สร้างรูปกุญแจด้วย CSS

การสร้างรูปกุญแจด้วย CSS อย่างเดียวมักจะใช้เทคนิคการสร้างรูปร่างพื้นฐาน (pure CSS shapes) โดยอาศัยการรวมกันขององค์ประกอบต่างๆ เช่น วงกลม (สำหรับส่วนหัวกุญแจ) และสี่เหลี่ยม (สำหรับส่วนลำตัวและฟันกุญแจ) และมักจะใช้ :before และ :after pseudo-elements เพื่อสร้างส่วนประกอบเพิ่มเติมโดยไม่ต้องเพิ่ม HTML element

<div class="lock"></div>
  <h2>LOCK</h2>

.lock{
  font-size: 10;
  position: relative;
  width: 6em;
  height: 4em;
  border-radius: 1em;
  top: 5em;
  box-sizing: border-box;
  border: 1em solid black;
  border-right-width: 2.5em;
  border-left-width: 2.5em;
  margin: 0 0 6rem 0;
}

.lock::before{
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid black;
  width: 4.5em;
  height: 3.5em;
  left: 120%;
  margin-left: -3em;
  top: -3.5em;
  border-top-left-radius: 3em;
  border-top-right-radius: 3em;
}

.lock::after{
  content: "";
    box-sizing: border-box;
    position: absolute;
    border: .6em solid black;
    width: 2em;
    height: 3em;
    border-radius: 2.5em;
    left: 200%;
    top: -.5em;
    margin-left: -2.5em;
}

h2{
    margin-left: 15px;
    font-family: Arial, Helvetica, sans-serif;
  }

• .key-shape: ทำหน้าที่เป็นส่วนหัวของกุญแจและเป็น container หลักสำหรับ pseudo-elements อื่นๆ โดยใช้ border-radius: 50% เพื่อสร้างรูปทรงวงกลม และ position: relative เพื่อให้สามารถจัดตำแหน่ง pseudo-elements ลูกได้อย่างแม่นยำ
• ::before: สร้างส่วนลำตัวกุญแจที่ยื่นยาวลงมาจากส่วนหัว โดยใช้คุณสมบัติ position: absolute และกำหนด top และ left เพื่อวางตำแหน่งให้เหมาะสม
• ::after: สร้างส่วนฟันกุญแจที่ปลายสุดของลำตัว โดยใช้เทคนิคเดียวกันกับการสร้างลำตัวกุญแจ

เทคนิคนี้แสดงให้เห็นถึงความสามารถของ CSS ในการสร้างรูปร่างที่ซับซ้อนโดยใช้เพียงองค์ประกอบ HTML เดียว ด้วยการใช้ pseudo-elements และการจัดตำแหน่งที่แม่นยำ