สอนวิธีสร้างสามเหลี่ยมด้วย CSS Border

เรามักจะพบเห็นรูปสามเหลี่ยมได้ตามเว็บทั่วไป เช่น ลูกศร หรือ tooltip ต่างๆ แต่ก่อนเราอาจจะต้องสร้างสามเหลี่ยมขึ้นมาโดยใช้รูปภาพ ซึ่งมันไม่ค่อยจะสะดวกนัก มีวิธีอื่นที่ดีกว่านี้มั้ย ?

โจทย์ของการสร้างรูปสามเหลี่ยม

วิธีสร้างรูปสามเหลี่ยมที่เราต้องการจะต้องมีลักษณะดังนี้

  • Cross-browserทุกๆ web browsers หรือส่วนใหญ่สามารถใช้วิธีนี้ได้
  • Maintainabilityวิธีนี้จะต้องสะดวกในการปรับเปลี่ยนสไตล์

Solutions

การสร้างรูปสามเหลี่ยมนั้นมีอยู่หลายวิธีด้วยกัน ดังนี้

  • Imageวิธีนี้ทุกคนคงจะคุ้นเคยเป็นอย่างดี มันก็คือการทำกราฟฟิครูปสามเหลี่ยมขึ้นมา แล้วนำมาใส่ในเว็บเพจด้วย img element นั่นเอง วิธีนี้มีข้อเสียตรงที่มันไม่ค่อยจะยืดหยุ่น และยังทำให้เกิด http request เพิ่มขึ้นอีกด้วย
  • Encoded imageวิธีนี้จะคล้ายวิธีแรก แต่จะนำกราฟฟิคจากวิธีแรกไปเข้ารหัสก่อน จึงไม่ทำให้เกิด http request แต่วิธีนี้ยังคงไม่ยืดหยุ่นเหมือนเดิม และไม่เหมาะกับกราฟฟิคขนาดใหญ่ๆ เพราะโค้ดที่ได้หลังการเข้ารหัสจะมีขนาดใหญ่ตามไปด้วย
  • HTML entity/Icon fontวิธีนี้จะใช้ “ตัวอักษร” ที่มีหน้าตาเป็นรูปสามเหลี่ยมแทนการใช้ “รูปภาพ” ข้อเสียของวิธีนี้คือถึงแม้ว่าเราจะสามารถปรับขนาดของสามเหลี่ยมได้ก็จริง แต่เราก็ไม่สามารถปรับความแหลมของสามเหลี่ยมได้อยู่ดี
  • CSS rotated squareวิธีนี้เราจะต้องสร้างสี่เหลี่ยมจัตุรัสขึ้นมาก่อน จากนั้นค่อยหมุนสี่เหลี่ยมนี้ไป 45 องศา ด้วย css transform rotate จากนั้นให้ใช้ position เลื่อนให้ครึ่งบนของสี่เหลี่ยมล้นออกไปนอก container แล้วกำหนด overflow ให้เป็น hidden เราก็จะได้สามเหลี่ยมที่ชี้ลงล่าง จะเห็นว่าวิธีนี้ก็ยังไม่สามารถปรับความแหลมของสามเหลี่ยมได้
  • HTML5 Canvas/SVGแน่นอนว่า 2 วิธีนี้ สามารถสร้างสามเหลี่ยมขึ้นมาได้ แต่จะมีข้อเสียตรงที่มันอาจยังไม่รองรับในบาง web browsers นอกจากนั้น การปรับเปลี่ยนแก้ไขก็ไม่ค่อยสะดวกเท่าไรนัก

รู้จักกับ CSS Border

หากพูดถึง css borders แล้ว ทุกคนคงจะรู้จักกันดี เพราะมันก็คือ css property ที่เอาไว้สำหรับใส่ขอบให้กับ html elements นั่นเอง สมมติโค้ด html เราเป็นแบบนี้

หากเราอยากจะใส่ขอบให้ักับ html element นี้ ให้เราใช้ css border

แต่จะเกิดอะไรขึ้น หากเรากำหนดให้เส้นขอบในแต่ละด้านนั้น มีสีที่แตกต่างกัน?

เมื่อเส้นขอบมีขนาดใหญ่มากๆ เราจะเห็นว่าการประกอบเส้นขอบทั้ง 4 ด้านเข้าด้วยกันนั้น คล้ายกับวงกบของประตูหรือหน้าต่างไม่มีผิด

Workshop – สร้างสามเหลี่ยมด้วย CSS Border

หลังจากที่เราเข้าใจหลักการของ css border แล้ว ทำให้เราสามารถนำมันมาประยุกต์ใช้ในการสร้างรูปสามเหลี่ยมได้ ก่อนอื่นให้เรากำหนดขนาดของกล่องสี่เหลี่ยมให้มีความกว้าง และความสูงเป็น 0px เสียก่อน

เราก็จะได้สามเหลี่ยม 4 อัน ชี้เข้าหากัน หากเราต้องการปรับความแหลมของสามเหลี่ยม เราก็สามารถไปปรับที่ขนาดของ border ได้

จะเห็นว่ารูปสามเหลี่ยมด้านบน-ล่าง นั้นแหลมขึ้น ส่วนรูปสามเหลี่ยมด้านซ้าย-ขวานั้นทู่ลง ในขั้นตอนสุดท้าย เราจะต้องซ่อน border ด้านที่เราไม่ต้องการไว้ จะได้มองเห็นเป็นรูปสามเหลี่ยมเพียงอันเดียว ให้เรากำหนดสีของ border ด้านที่เราจะซ่อนให้เป็น transparent(โปร่งใส) เราก็จะได้รูปสามเหลี่ยมตามที่ต้องการ

Advance – CSS Border + Pseudo-Elements

จาก workshop ข้างต้น จะเห็นว่าเราได้สร้าง html element ขึ้นมาเพื่อสร้างสามเหลี่ยมโดยเฉพาะ ซึ่งจริงๆ แล้ว รูปสามเหลี่ยมนี้ไม่ถือว่าเป็น content เราจึงไม่ควรสร้างมันโดยใช้ html ให้เราเปลี่ยนมาใช้ css pseudo-element แทน สมมติเราจะสร้าง tooltip ขึ้นมาสักอันหนึ่ง โค้ด html เราเป็นแบบนี้

ให้เราใช้ css pseudo-element ในการสร้างรูปสามเหลี่ยมตรง tooltip

Triangle tutorial by
Siam HTML

หากสังเกตดีๆ จะเห็นว่ารูปสามเหลี่ยมของเรายังไม่มีขอบ เพราะตัวมันเองก็เป็นขอบอยู่แล้ว ในการจะสร้างขอบให้กับมัน เราจะต้องสร้าง css pseudo-element ขึ้นมาอีกตัว ให้เราเปลี่ยนมาเขียน css แบบนี้เเทน

Triangle tutorial by
Siam HTML

เพียงเท่านี้ เราก็จะได้ tooltip ที่สวยงาม และยังสามารถใช้ได้ในทุกๆ web browsers อีกด้วย

ทำไมต้องใช้ทั้ง transparent และ rgba ?

จากตัวอย่างในหัวข้อ advance จะเห็นว่าเราจำเป็นจะต้องกำหนดสีของ border โดยใช้ทั้ง transparent และ rgba ที่มี alpha เป็น 0 ที่เป็นเช่นนี้ก็เพราะว่า ถึงแม้เราจะกำหนดสีของ border ให้เป็น transparent แล้ว แต่ใน firefox ก็ยังคงเห็นเส้นขอบเล็กๆ อยู่ดี วิธีแก้คือเราจะต้องแปลงโค้ดสีแบบ Hex ของ border ที่จะแสดงเป็นรูปสามเหลี่ยมให้เป็นแบบ RGB ก่อน แล้วจึงเขียนให้อยู่ในรูปแบบ rgba ที่มี alpha เป็น 0 เส้นขอบเล็กๆ นั้นก็จะหายไป ส่วน transparent นั้น เรายังคงต้องใช้เป็น fallback อยู่ เพราะว่า rgba นั้นจะใช้ได้ตั้งแต่ Internet Explorer เวอร์ชัน 9 ขึ้นไป

ชีวิตสบายขึ้นเมื่อมี CSS Arrow Please

หากรู้สึกว่าขั้นตอนทั้งหมดที่เราเพิ่งทำไปนั้นค่อนข้างจะยุ่งยากไปสักหน่อย เราก็สามารถใช้ tool อย่าง CSS Arrow Please เข้ามาช่วยได้ เพียงแค่เราระบุตำแหน่งพร้อมกับกำหนดขนาดและสีของรูปสามเหลี่ยม CSS Arrow Please ก็จะนำข้อมูลเหล่านั้นไปแปลงเป็นโค้ดให้เราเอาไปใช้ได้ทันที


Attachment : css-triangle.zip

(Visited 6,870 times, 4 visits today)

5 Responses to “สอนวิธีสร้างสามเหลี่ยมด้วย CSS Border”

  1. ขอบคุณครับ ชัดเจนดีมากเลย

  2. ลุงหนวด หมออนามัย says:

    แจ่มแจ้ง

  3. masato says:

    ถ้าว่า เราจะใส่เงาที่ลูกศร แทน border นี่สามารถทำได้ไหมครับ // ทำยังไง ขอบคุณครับ

    • Siam HTML says:

      ข้อเสียของวิธีนี้คือจะไม่สามารถใส่เงา(box-shadow) ได้ครับ
      ถ้าต้องการใส่จริงๆ คงต้องใช้วิธีอื่นที่สามารถใส่ box-shadow ได้ ดังนี้ครับ
      1. Image
      3. HTML entity/Icon font
      4. CSS rotated square

  4. สุดยอดมากๆ

Leave a Reply