การทำกล่องมุมโค้ง ด้วย CSS

โค้งทำไม โค้งแล้วไปไหน ถ้าไม่โค้งแล้วมันจะเกิดอะไรขึ้น โค้งกี่รูปแบบ การเขียน CSS เพื่อทำกล่องแบบมุมโค้งนั้น มันสำคัญเท่ากับปลูกมะละกอ หว่านหล้าไถนาหรือไม่ มะม่วงจะสุกทันวันขึ้นปีใหม่ไหม อย่าเพิ่งไปสนใจ สนใจกล่อง css ขอบโค้งเพรียวสมส่วนด้วยน้ำยาลดความอ้วนจากเราก่อน

ไม่ค่อยรุ้เรื่อง ใช่เลยครับ ช่วงนี้ผมพูดจาไม่ค่อยจะรู้เรื่องจับใจความไม่ได้ แต่วันนี้อยากจะมานั่งเขียนเรื่อง การทำ กล่อง css ขอบโค้ง พอดีเมื่อวันก่อนเจอสาวสวย สะโพกเว้าโค้งน่าสนใจ จึงนำมาเป็นแรงบันดาลใจได้อย่างดี

หลายคนคงผ่านตาเรื่อง การทำขอบโค้งด้วย Background เพียงรุปเดียวมาแล้ว ก็ไม่เป็นไร วันนี้ผมก็จะมาบอกแบบเดินนั่นแหละครับ ก็ พื้นหลังรูปเดียว แต่มันเป็นขอบโค้งได้ อ้าว ได้ยังไง

หลักการคือ การใช้ Background Position เพื่อกำหนดจุดแสดงแบบว่า จุดยืนของใคร จุดยืนของมัน จะได้แสดงผลเฉพาะที่ของพื้นหลังได้อย่างถูกต้อง

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

ไม่ใช่มีแค่ขอบโค้งแบบเดียว ผมมีขอบโค้งมาให้ดูสองแบบ แต่จริงๆ มันโค้งได้หลายแบบ ในอนาคต จะโค้งแบบโปรเจคไตล์ แอโรวได้นามิกด้วย แต่นี่มันปัจจุบัน โค้งแบบนี้ไปก่อน แล้วกัน

แต่ต้องขออภัยผู้ใช้ IE6 ด้วยนะครับ ผมไม่ได้เขียนให้รองรับเอาไว้ แต่สามารถเอาไปปรับเปลี่ยนใช้ได้ เพราะผมเขียน css แบบ Adjacent sibling selectors แล้วก็ Child Selector ก็อย่างที่บอก สามารถเอาไปถอดออกเปลี่ยนเป็น Class Selector ได้นะครับ แข็งขันกันหน่อย

ก็ ดูตัวอย่างกันได้ที่หน้า ตัวอย่างการทำ CSS มุมโค้ง

แล้วก็ โหลด ไฟล์ไปศึกษาต่อกันเพิ่มเติมครับ corn.zip

ปล. Element เปล่า เป็นไปได้ก็ อย่าให้มีนะครับ แล้วจะทำยังไง เพื่อไม่ให้มี Element เปล่า ในตอนนี้ ก็ อย่าโค้งไงครับ หรือโค้งแบบไม่ให้ Element เปล่า ยังไงหรือ?