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

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

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

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

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

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

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

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

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

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

Hasan Lebaesa

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