เครื่องมือสร้างรูปสามเหลี่ยม
ด้วย CSS
สร้างรูปสามเหลี่ยมด้วย CSS ง่ายๆ โดยใช้เทคนิค "border trick"
เลือกทิศทาง ขนาด สี และคัดลอกโค้ดได้ทันที
เกี่ยวกับ
เครื่องมือสร้างรูปสามเหลี่ยมด้วย CSS ช่วยให้คุณสร้างรูปสามเหลี่ยมที่คมชัดโดยใช้เทคนิค border trick สุดคลาสสิก — ไม่ต้องใช้รูปภาพหรือไฟล์ SVG รองรับครบทั้ง 8 ทิศทาง (บน ล่าง ซ้าย ขวา และ 4 มุมทแยง)
เครื่องมือนี้เหมาะสำหรับทำหางกล่องข้อความ ลูกศร dropdown หรือส่วนตกแต่ง UI โค้ดที่สร้างขึ้นสามารถคัดลอกและนำไปวางในโปรเจกต์ของคุณได้เลย ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ ปลอดภัย 100%
วิธีใช้งาน
เลือกทิศทาง
เลือกทิศทางใดทิศทางหนึ่งจากปุ่มสี่เหลี่ยม เพื่อกำหนดทิศทางที่ลูกศรสามเหลี่ยมของคุณจะชี้ไป
ปรับพารามิเตอร์
ใช้แถบเลื่อนเพื่อปรับความกว้าง ความสูง และเปลี่ยนสีให้เข้ากับเว็บไซต์ของคุณ การแสดงผลตัวอย่างทางด้านขวาจะอัปเดตแบบเรียลไทม์
คัดลอกโค้ด
คลิก "คัดลอก CSS" หรือ "คัดลอก HTML" เพื่อนำโค้ดที่สร้างเสร็จแล้วไปใช้ในโปรเจกต์ของคุณ
คำศัพท์
- Border Trick
- เทคนิคของ CSS ในการสร้างรูปสามเหลี่ยม โดยการกำหนดความกว้างและความสูงเป็น 0 แล้วใช้สีกับความหนาของเส้นขอบ (border)
- transparent
- ค่าสีแบบ "โปร่งใส" ของ CSS ใช้สำหรับซ่อนขอบด้านที่ไม่ต้องการ เพื่อให้เหลือแค่รูปสามเหลี่ยมตรงกลาง
- clip-path
- พร็อพเพอร์ตี้ CSS สมัยใหม่ที่ใช้สำหรับครอบตัดรูปทรงของกล่อง ถือเป็นทางเลือกแทน Border trick หากต้องการสร้างรูปทรงที่ซับซ้อนกว่ารูปสามเหลี่ยม
- Speech Bubble
- กล่องข้อความสนทนา หรือบอลลูนคำพูด มักจะมีรูปสามเหลี่ยมเล็กๆ ที่มุม เพื่อชี้ว่าข้อความนั้นเป็นของตัวละครใด
- Pseudo-element (::before/::after)
- องค์ประกอบจำลองที่สร้างด้วย CSS นิยมใช้สำหรับติดรูปสามเหลี่ยมเข้ากับกล่องหลักโดยไม่ต้องเพิ่มโค้ด HTML ให้ซับซ้อน
คำถามที่พบบ่อย
- Q.ควรใช้ Border trick หรือ clip-path ดี?
- Border trick ทำงานได้ดีในเบราว์เซอร์รุ่นเก่า ส่วน clip-path รองรับรูปทรงที่ซับซ้อนกว่า แต่อาจไม่รองรับเบราว์เซอร์รุ่นเก่าบางตัว สำหรับโปรเจกต์สมัยใหม่สามารถเลือกใช้แบบไหนก็ได้
- Q.ทำรูปสามเหลี่ยมด้านเท่าได้ไหม?
- สามารถทำได้โดยการกะอัตราส่วนของความกว้างและความสูง ตัวอย่างเช่น หากต้องการสร้างสามเหลี่ยมชี้ขึ้นด้านบน ให้ตั้งค่าความกว้าง (width) ≈ ความสูง (height) × 2 เพื่อให้ได้ผลลัพธ์ใกล้เคียงกับสามเหลี่ยมด้านเท่ามากที่สุด
- Q.ข้อมูลของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ ทุกการดำเนินการสร้างโค้ดจะเกิดขึ้นบนเบราว์เซอร์ของคุณ รับประกันความปลอดภัย 100%
- Q.ทำให้รูปสามเหลี่ยมมีขนาดแบบยืดหยุ่น (responsive) ได้อย่างไร?
- คุณสามารถคัดลอกโค้ด CSS แล้วเปลี่ยนหน่วย px เป็นหน่วยที่ยืดหยุ่น เช่น em, rem หรือ vw ด้วยตัวเองได้เลย
- Q.เครื่องมือนี้สามารถสร้าง CSS สำหรับกล่องข้อความสนทนา (speech bubble) ทั้งหมดได้หรือไม่?
- เครื่องมือนี้เน้นที่การสร้าง "หาง" ของสามเหลี่ยมเท่านั้น สำหรับการสร้างกล่องข้อความสนทนา โดยทั่วไปคุณจะต้องใช้ ::before หรือ ::after เพื่อเชื่อมสามเหลี่ยมนี้เข้ากับกล่องข้อความหลัก
การใช้งานจริง
ทำหางกล่องข้อความแชท
ติดรูปสามเหลี่ยมเล็กๆ ไว้ที่มุมของกล่องข้อความในหน้าต่างแชท (chat box)
ลูกศรเมนู Dropdown
แสดงให้ผู้ใช้รู้ว่าเมนูนี้สามารถคลิกเพื่อดูเนื้อหาเพิ่มเติมได้
สร้างลูกศร Select แบบกำหนดเอง
ใช้แทนลูกศรเริ่มต้นที่ดูไม่สวยงามของแท็ก <select> ด้วยลูกศรที่ปรับแต่งเอง
ปุ่มเลื่อน Carousel
ลูกศรเลื่อนซ้ายขวาในสไลด์โชว์รูปภาพ ซึ่งเบาและจัดการได้ง่ายกว่าการใช้รูปภาพ
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง