การสร้าง Shape ด้วย CSS

การสร้าง Shape ด้วย CSS: ปลดปล่อยพลังแห่งรูปทรง

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

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

ทำไมต้องสร้าง Shape ด้วย CSS?

• ประสิทธิภาพ: ลดการใช้รูปภาพ ทำให้เว็บไซต์โหลดเร็วขึ้น
• ความยืดหยุ่น: สามารถปรับขนาดและสีของ Shape ได้ง่าย
• ความสวยงาม: สร้าง Shape ที่มีเอกลักษณ์และเข้ากับธีมเว็บไซต์

ในบทนี้ เราจะเน้นเทคนิคพื้นฐาน 3 อย่างที่ใช้ในการสร้าง Shape ด้วย CSS ได้แก่:

• การใช้ Border: สร้างรูปทรงง่ายๆ เช่น สามเหลี่ยม
• การใช้ Transform: หมุนและปรับขนาดองค์ประกอบ
• การใช้ Clip-path: ตัดองค์ประกอบให้เป็นรูปทรงต่างๆ

1. การใช้ Border สร้าง Shape

การใช้ Border เป็นวิธีที่ง่ายที่สุดในการสร้างรูปทรงพื้นฐาน เช่น สามเหลี่ยม โดยอาศัยหลักการที่ว่า Border จะเอียงเข้าหากันเมื่อความกว้างของ Border มีขนาดใหญ่

การสร้างสามเหลี่ยม

ลองดูตัวอย่างโค้ดต่อไปนี้:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

คำอธิบาย:

• เรากำหนด `width` และ `height` เป็น 0 เพื่อให้องค์ประกอบไม่มีเนื้อที่ภายใน
• `border-left` และ `border-right` เป็นสี `transparent` ทำให้มองไม่เห็น
• `border-bottom` เป็นสีแดง และมีความสูง 100px ทำให้เกิดเป็นสามเหลี่ยม

HTML ที่ใช้:

<div class="triangle"></div>

ผลลัพธ์: คุณจะได้สามเหลี่ยมสีแดงชี้ขึ้น

ข้อผิดพลาดที่พบบ่อย: ลืมกำหนด `width` และ `height` เป็น 0 ทำให้ Shape ไม่เป็นไปตามที่ต้องการ

กรณีใช้งานจริง: สร้างลูกศรสำหรับปุ่ม Next/Previous หรือใช้เป็นสัญลักษณ์ตกแต่งเว็บไซต์

การสร้างสามเหลี่ยมแบบอื่นๆ

คุณสามารถเปลี่ยนทิศทางของสามเหลี่ยมได้โดยเปลี่ยน `border-bottom` เป็น `border-top`, `border-left` หรือ `border-right`

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid blue; /* เปลี่ยนเป็น border-top */
}

ผลลัพธ์: คุณจะได้สามเหลี่ยมสีน้ำเงินชี้ลง

2. การใช้ Transform สร้าง Shape

Transform เป็นคุณสมบัติ CSS ที่ช่วยให้เราสามารถหมุน (rotate), ปรับขนาด (scale), เลื่อน (translate) และบิดเบือน (skew) องค์ประกอบต่างๆ ได้ การใช้ Transform ร่วมกับ Shape พื้นฐาน จะช่วยให้เราสร้าง Shape ที่ซับซ้อนขึ้นได้

การสร้างสี่เหลี่ยมข้าวหลามตัด (Diamond)

เราจะเริ่มจากสี่เหลี่ยมจัตุรัส แล้วใช้ `transform: rotate()` เพื่อหมุนให้เป็นสี่เหลี่ยมข้าวหลามตัด

.diamond {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotate(45deg);
}

คำอธิบาย:

• เราสร้างสี่เหลี่ยมจัตุรัสขนาด 100x100px ด้วย `width` และ `height`
• `background-color` กำหนดสีพื้นหลังเป็นสีเขียว
• `transform: rotate(45deg)` หมุนสี่เหลี่ยมเป็นมุม 45 องศา ทำให้เกิดเป็นสี่เหลี่ยมข้าวหลามตัด

HTML ที่ใช้:

<div class="diamond"></div>

ผลลัพธ์: คุณจะได้สี่เหลี่ยมข้าวหลามตัดสีเขียว

ข้อผิดพลาดที่พบบ่อย: ลืมกำหนด `background-color` ทำให้มองไม่เห็น Shape ที่สร้างขึ้น

กรณีใช้งานจริง: ใช้เป็นไอคอน หรือตกแต่งเว็บไซต์ให้ดูมีสไตล์

การสร้างดาว

การสร้างดาวจะซับซ้อนขึ้นเล็กน้อย โดยเราจะใช้ Transform ร่วมกับ pseudo-element (::before และ ::after) เพื่อสร้างแฉกของดาว

.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-right:  50px solid transparent;
  border-bottom: 35px solid yellow;
  border-left:   50px solid transparent;
  transform: rotate(35deg);
}
.star:before {
  content: '';
  position: absolute;
  top: -45px;
  left: -20px;
  border-bottom: 40px solid yellow;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  transform: rotate(-35deg);
}
.star:after {
  content: '';
  position: absolute;
  top: 3px;
  left: -70px;
  border-right: 50px solid transparent;
  border-bottom: 35px solid yellow;
  border-left: 50px solid transparent;
  transform: rotate(-70deg);
}

คำอธิบาย: โค้ดนี้ค่อนข้างซับซ้อน แต่หลักการคือเราใช้ Border และ Transform เพื่อสร้างแฉกของดาวแต่ละแฉก แล้วใช้ `position: absolute` เพื่อจัดวางตำแหน่งให้ถูกต้อง

HTML ที่ใช้:

<span class="star"></span>

ผลลัพธ์: คุณจะได้รูปดาวสีเหลือง

ข้อผิดพลาดที่พบบ่อย: การคำนวณตำแหน่งของ pseudo-element ผิดพลาด ทำให้แฉกของดาวไม่สมมาตร

กรณีใช้งานจริง: ใช้เป็น Rating Star หรือตกแต่งเว็บไซต์ในธีมเทศกาล

3. การใช้ Clip-path สร้าง Shape

Clip-path เป็นคุณสมบัติ CSS ที่ทรงพลัง ช่วยให้เราสามารถตัดองค์ประกอบให้เป็นรูปทรงต่างๆ ได้อย่างอิสระ โดยใช้ฟังก์ชันต่างๆ เช่น `circle()`, `ellipse()`, `polygon()`

การสร้างวงกลม

เราสามารถสร้างวงกลมได้ง่ายๆ ด้วยฟังก์ชัน `circle()`

.circle {
  width: 100px;
  height: 100px;
  background-color: purple;
  clip-path: circle(50%); /* ตัดให้เป็นวงกลม */
  border-radius: 50%; /* อีกวิธีในการสร้างวงกลม */
}

คำอธิบาย:

• เราสร้างสี่เหลี่ยมจัตุรัสขนาด 100x100px
• `background-color` กำหนดสีพื้นหลังเป็นสีม่วง
• `clip-path: circle(50%)` ตัดสี่เหลี่ยมให้เป็นวงกลม โดยกำหนดรัศมีเป็น 50% ของขนาดองค์ประกอบ
• `border-radius: 50%` เป็นอีกวิธีที่ง่ายกว่าในการสร้างวงกลม

HTML ที่ใช้:

<div class="circle"></div>

ผลลัพธ์: คุณจะได้วงกลมสีม่วง

ข้อผิดพลาดที่พบบ่อย: ลืมกำหนด `width` และ `height` ให้เท่ากัน ทำให้ได้รูปวงรีแทนที่จะเป็นวงกลม

กรณีใช้งานจริง: ใช้เป็น Avatar หรือปุ่มต่างๆ

การสร้างรูปหลายเหลี่ยม (Polygon)

ฟังก์ชัน `polygon()` ช่วยให้เราสร้างรูปหลายเหลี่ยมได้อย่างอิสระ โดยกำหนดพิกัด (x, y) ของแต่ละมุม

.polygon {
  width: 200px;
  height: 150px;
  background-color: orange;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* สร้างสามเหลี่ยม */
}

คำอธิบาย:

• เราสร้างสี่เหลี่ยมขนาด 200x150px
• `background-color` กำหนดสีพื้นหลังเป็นสีส้ม
• `clip-path: polygon(50% 0%, 0% 100%, 100% 100%)` ตัดสี่เหลี่ยมให้เป็นสามเหลี่ยม โดยกำหนดพิกัดของแต่ละมุม:
  • (50% 0%): มุมบนสุด
  • (0% 100%): มุมล่างซ้าย
  • (100% 100%): มุมล่างขวา

HTML ที่ใช้:

<div class="polygon"></div>

ผลลัพธ์: คุณจะได้สามเหลี่ยมสีส้ม

ข้อผิดพลาดที่พบบ่อย: การกำหนดพิกัดผิดพลาด ทำให้รูปทรงไม่เป็นไปตามที่ต้องการ

กรณีใช้งานจริง: สร้าง Banner หรือตกแต่งเว็บไซต์ด้วยรูปทรงที่ซับซ้อน

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการสร้าง Shape ด้วย CSS โดยใช้เทคนิคต่างๆ เช่น การใช้ Border, Transform และ Clip-path แต่ละเทคนิคก็มีข้อดีข้อเสียแตกต่างกันไป การเลือกใช้เทคนิคที่เหมาะสมขึ้นอยู่กับความซับซ้อนของ Shape ที่ต้องการสร้าง และความเข้ากันได้ของ Browser ที่ต้องการสนับสนุน

การสร้าง Shape ด้วย CSS เป็นทักษะที่มีประโยชน์อย่างมากสำหรับนักพัฒนาเว็บไซต์ เพราะช่วยให้เราสร้างเว็บไซต์ที่สวยงาม มีเอกลักษณ์ และมีประสิทธิภาพมากยิ่งขึ้น

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