Softonic

เครื่องมือสร้างรูปสามเหลี่ยม CSS

ขั้นตอน 1 / 2
ถัดไป

สามเหลี่ยม CSS แบบคลาสสิกไม่ใช่สามเหลี่ยมจริง ๆ แต่เป็นองค์ประกอบที่มีความกว้างและความสูงเป็นศูนย์ ซึ่งมีเส้นขอบโปร่งใสสามด้านและเส้นขอบที่มีสีอีกหนึ่งด้าน โดยเส้นขอบทั้งสี่มาบรรจบกันที่จุดเดียว เครื่องมือนี้จะสร้างการประกาศดังกล่าวให้คุณในสี่ทิศทาง (บน ล่าง ซ้าย ขวา) ด้วยขนาดตามค่าพิกเซลที่คุณเลือกและเติมด้วยสีที่คุณกำหนด เหมาะอย่างยิ่งสำหรับลูกศรของทูลทิป ฟองคำพูด และตัวคั่นเบรดครัมบ์

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

  1. 1

    เลือกทิศทาง

    บน ล่าง ซ้าย หรือขวา ทิศทางจะกำหนดว่าเส้นขอบด้านใดจะได้รับสี และอีกสามด้านจะยังคงโปร่งใส

  2. 2

    กำหนดขนาด

    ค่าขนาดจะใช้กับความกว้างของเส้นขอบทุกด้าน สามเหลี่ยมขนาด 60px จะกว้าง 120px (หรือสูง 120px ขึ้นอยู่กับทิศทาง)

  3. 3

    เลือกสีเติม

    ช่องเลือกสีรองรับเฉพาะค่า hex (เช่น `#10b981`) เท่านั้น ไม่รองรับสีแบบ rgb, rgba หรือสีที่มีชื่อ สีจะถูกนำไปใช้กับเส้นขอบด้านตรงข้ามเท่านั้น

  4. 4

    คัดลอกกฎ CSS

    ผลลัพธ์คือชุดกฎ `.triangle { ... }` ฉบับสมบูรณ์ วางลงในสไตล์ชีตของคุณ แล้วเพิ่ม `<div class="triangle"></div>` ในจุดที่ต้องการ

ทำไมเทคนิคเส้นขอบนี้จึงได้ผล

เมื่อกล่องมี width: 0 และ height: 0 เส้นขอบทั้งสี่ด้านจะมาบรรจบกันที่จุดศูนย์กลางจุดเดียว เนื่องจากเส้นขอบเชื่อมต่อกันที่มุม 45 องศา แต่ละด้านจึงเป็นรูปสามเหลี่ยมอยู่แล้ว เพียงแต่สามด้านมองไม่เห็น เมื่อเติมสีให้ด้านหนึ่ง คุณก็จะเห็นสามเหลี่ยมด้านนั้น

แผนผังทิศทาง

ทิศทาง เส้นขอบที่มองเห็น เส้นขอบโปร่งใส
บน border-bottom border-left, border-right, border-top
ล่าง border-top border-left, border-right, border-bottom
ซ้าย border-right border-top, border-bottom, border-left
ขวา border-left border-top, border-bottom, border-right

การคำนวณขนาด

เส้นขอบโปร่งใสทั้งสามด้านใช้ค่าขนาดเดียวกัน เส้นขอบที่มองเห็นก็ใช้ขนาดเดียวกัน ดังนั้น สามเหลี่ยมที่มี size: 60:

  • ความกว้าง = 2 × 60 = 120px สำหรับสามเหลี่ยมชี้ขึ้น/ลง
  • ความสูง = 2 × 60 = 120px สำหรับสามเหลี่ยมชี้ซ้าย/ขวา

หากต้องการสามเหลี่ยมแบบไม่สมมาตร (ฐานแคบ ยอดสูง) ให้กำหนดขนาดหนึ่งให้เส้นขอบโปร่งใส และอีกขนาดหนึ่งให้เส้นขอบที่มองเห็น เช่น border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; จะได้สามเหลี่ยมชี้ขึ้นที่สูงและแคบ

เมื่อใดควรใช้ SVG แทน

  • คุณต้องการหลายจุดยอด ไม่ใช่เพียงสามจุด ให้ใช้ <polygon>
  • สามเหลี่ยมต้องปรับขนาดได้อย่างลื่นไหลตามองค์ประกอบแม่ ให้ใช้ viewBox และ preserveAspectRatio
  • คุณต้องการการเติมแบบไล่ระดับสี เส้นสโตรก หรือปลายมน เส้นขอบ CSS ทำสิ่งเหล่านี้ไม่ได้เลย

คำถามที่พบบ่อย

ด้วยเส้นขอบเพียงอย่างเดียวทำไม่ได้ ความกว้างของเส้นขอบไม่รองรับ % หรือ vw ในแบบที่ได้รับการสนับสนุนอย่างดี หากต้องการการปรับขนาดที่ลื่นไหล ให้เปลี่ยนไปใช้ SVG <polygon> หรือใช้ clip-path: polygon(...) กับองค์ประกอบทั่วไป

คุณไม่สามารถลบมุมตรงจุดที่เส้นขอบมาบรรจบกันได้ ให้ใช้ SVG ที่มี path แบบสโตรกร่วมกับ stroke-linejoin: round หรือใช้ clip-path: polygon(...) ร่วมกับ filter: drop-shadow เล็กน้อยเพื่อบังขอบ

ได้ นี่คือกรณีการใช้งานที่พบบ่อยที่สุด วางสามเหลี่ยมแบบ absolute ให้ชิดขอบของทูลทิป และปรับสีเติมให้ตรงกับสีพื้นหลังของทูลทิป เพื่อให้ดูเป็นฟองเดียวกัน

ใช่ ทิศทาง ขนาด และสีที่คุณเลือกจะถูกส่งไปยังเซิร์ฟเวอร์ของเราพร้อมกับคำขอของหน้า เพื่อให้เซิร์ฟเวอร์สร้าง CSS ได้ ในโหมดทีละขั้นตอน ค่าเหล่านี้จะถูกพาไปในลิงก์ของหน้าด้วย ระบบจะไม่จัดเก็บค่าเหล่านี้

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือตรวจสอบหมายเลขโทรศัพท์

ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966

เครื่องมือนี้มีให้บริการในภาษาอื่น