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

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

เทคนิคเปลี่ยนรูปสี่เหลี่ยมเป็นวงกลมด้วย CSS

1.เริ่มด้วยการตระเตรียมรูปภาพสี่เหลี่ยมก่อนเลยครบ ขนาดตัวอย่าง 120 x 120

เทคนิคเปลี่ยนรูปสี่เหลี่ยมเป็นวงกลมด้วย CSS

2.เขียน HTML เพื่อแสดงรูปภาพ


เทคนิคเปลี่ยนรูปสี่เหลี่ยมเป็นวงกลมด้วย CSS





3.เริ่มเขียนคำสั่ง CSS ในส่วน head


เทคนิคเปลี่ยนรูปสี่เหลี่ยมเป็นวงกลมด้วย CSS


4.ผลลัพธ์ก็จะเป็นไปตามที่เราต้องการครับ

เทคนิคเปลี่ยนรูปสี่เหลี่ยมเป็นวงกลมด้วย CSS

Hasan Lebaesa

เริ่มทำงานกับ Web Agency กทม. ลาออกมาทำฟรีแลนซ์เต็มตัว และลาออกจากการเป็นฟรีแลนซ์ ก่อตั้งบริษัท, ปี 2019 ตั้งเป้าไว้ว่า จะเขียนบทความดีๆ วีคละ 1 บทความ. About Me