เครื่องกำเนิดสามเหลี่ยม CSS

สร้างสามเหลี่ยม CSS ด้วยเคล็ดลับเส้นขอบแบบคลาสสิก กำหนดทิศทาง ขนาด และสี จากนั้นคัดลอกตัวอย่างข้อมูล

CSS Triangle Generator

Live

Direction

Size60px

Color

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

สร้างสามเหลี่ยม CSS ด้วยเทคนิคเส้นขอบ — ทิศทาง ขนาด และสี
ทำงานในเบราว์เซอร์ของคุณ
ใช้งานได้ฟรี

วิธีใช้

เลือกทิศทางรูปสามเหลี่ยม
กำหนดขนาดและสีเติม
คัดลอก CSS

How this tool works

เลือกทิศทางรูปสามเหลี่ยม
กำหนดขนาดและสีเติม
คัดลอก CSS

Recommended settings

ใช้ตัวเลือกเริ่มต้นก่อน จากนั้นจึงปรับเปลี่ยนหากจำเป็น

Supported formats

Text / on-page input

File size and limits

การดูตัวอย่างหลายเลเยอร์ที่ซับซ้อนมากอาจรู้สึกช้าลงในโทรศัพท์รุ่นเก่า

Privacy

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

Common use cases

ใช้ CSS Triangle Generator ทุกครั้งที่คุณต้องการ: สร้าง CSS Triangle พร้อมเทคนิคเส้นขอบ — ทิศทาง ขนาด และสี

Troubleshooting

การแสดงตัวอย่างดูแตกต่างออกไปหลังจากวาง

ตรวจสอบ CSS ที่แข่งขันกันบนเพจของคุณ (รีเซ็ต, สีที่สืบทอดมา) คัดลอกกฎที่สร้างขึ้นลงในสไตล์ชีตแบบแยกก่อน

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

สิ่งนี้อัปโหลด CSS ของฉันหรือไม่

ไม่ ตัวสร้างและตัวแปลงทำงานในเบราว์เซอร์ของคุณพร้อมการแสดงตัวอย่างแบบสด

ฉันจำเป็นต้องมีบัญชีหรือไม่?

ไม่ เปิดเครื่องมือ ปรับแต่งการควบคุม และคัดลอก CSS