home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีสร้างลูกศร (Arrows) ด้วย CSS

CSS Arrows: ใช้ Border สร้างสามเหลี่ยม แล้วหมุนด้วย Transform

เทคนิคคลาสสิก: กำหนด border สองด้าน (solid) สองด้าน transparent ความกว้างเท่ากัน จะได้สามเหลี่ยม แล้ว transform: rotate() ทิศทางต่างๆ

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
    i {
      border: solid rgb(62, 19, 182);
      border-width: 0 6px 6px 0; display: inline-block; padding: 3px;
    }
    p { font-size: 18px; font-weight: 500; }
    .rightArrow { transform: rotate(-45deg); }
    .leftArrow { transform: rotate(135deg); }
    .upArrow { transform: rotate(-135deg); }
    .downArrow { transform: rotate(45deg); }
  </style>
</head>
<body>
  <h2>CSS Arrows</h2>
  <p>Right arrow: <i class="rightArrow"></i></p>
  <p>Left arrow: <i class="leftArrow"></i></p>
  <p>Up arrow: <i class="upArrow"></i></p>
  <p>Down arrow: <i class="downArrow"></i></p>
</body>
</html>

หลักการ Border Triangle

.arrow {
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid blue; /* ลูกศรชี้ขึ้น */
}

ปรับ border ใด border หนึ่งให้มีสี ส่วนที่เหลือ transparent จะได้สามเหลี่ยม

ทางเลือกทันสมัย

  • Unicode Arrows: → ← ↑ ↓ ➜ ➤ ▶ ▼ – ใส่ตรงใน HTML ใช้ ::before content
  • SVG – scalable, สีหลายสี, animation ได้ – ใช้ <svg> inline หรือ background-image
  • CSS clip-path – clip-path: polygon(0 50%, 100% 0, 100% 100%)

Accessibility

ลูกศรที่เป็น decoration ให้ aria-hidden="true" หากเป็นปุ่ม/ลิงก์ ต้องมี accessible name (aria-label หรือ text เนื้อหา)