มาสร้าง CSS Shapes สนุกๆ กัน! ทุก shape ห่อหุ้มใน <div>
1. สี่เหลี่ยมผืนผ้าและสี่เหลี่ยมจัตุรัส
Div เป็นสี่เหลี่ยมโดยค่าเริ่มต้น — กำหนด width/height:
.rectangle { width: 2rem; height: 4rem; background-color: violet; }
.square { width: 5rem; height: 5rem; background-color: lime; }
Reminder: ใช้ rem (อิง root font-size, ปกติ 16px) ตั้ง font-size 20px → 2rem = 40px
2. วงกลม (Circle)
คล้ายสี่เหลี่ยมจัตุรัส แต่เพิ่ม border-radius: 50% สำหรับโปรไฟล์ภาพ:
.profile-image { width: 100px; height: 100px; border-radius: 50%; background-image: url(...); background-position: center; background-size: cover; }
3. 平行四邊形 (Parallelogram)
ใช้ transform: skew(-20deg) บิดรูป (และเนื้อหาภายใน) เป็น平行四邊形:
.parallelogram { color: ivory; width: 6rem; height: 1.5rem; transform: skew(-20deg); background: indianred; }
4. รูปทรงอื่นๆ
สามเหลี่ยม (Triangle)
.triangle { width: 0; height: 0; border-left: 2rem solid transparent; border-right: 2rem solid transparent; border-bottom: 5rem solid hotpink; }
หัวใจ (Heart)
.heart { width: 10rem; background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%) top left, radial-gradient(circle at 40% 65%, goldenrod 64%, transparent 65%) top right, linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left, linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right; background-size: 50% 50%; background-repeat: no-repeat; }
.heart::before { content: ""; display: block; padding-top: 100%; }
ปรับเปลี่ยนเปอร์เซ็นต์และสีได้ ใช้ ::before/::after สร้างรูปทรงซับซ้อน
ตัวอักษร T ด้วย polygon()
.letter-t { width: 5rem; height: 5rem; shape-outside: polygon(0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20%); clip-path: polygon(0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 80%, 40% 20%, 10% 20%); background: navajowhite; }
เครื่องมือ clip-path maker ช่วยสร้างโค้ดรูปทรงต่างๆ ได้ง่าย
สรุป
CSS Shapes สร้างได้หลากหลาย: สี่เหลี่ยม (width/height), วงกลม (border-radius 50%), 平行四邊形 (transform skew), 三角形 (border trick), หัวใจ (gradients + pseudo-elements), รูปทรงซับซ้อน (clip-path polygon) — ลองเล่นสร้างเอง!
