เรามาทำกล่องขอบโค้ง โดยใช้รูป มุมมน และเขียนแบบพื้นฐาน ด้วย html แบบ standards กัน ผมขอเสนอ วิธีที่เคยใช้ง่ายๆ 3 แบบด้วยกัน ลองนำไปใช้ ตามโอกาส

แบบที่ 1 ตัดรูป ขอบด้านบนและล่างมาแบบนี้

= curve_top.gif

= curve_bottom.gif

เขียน html ดังนี้

<div class=”curvetop”></div>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<div class=”curvebottom”></div>

เขียน css ดังนี้
<style type=”text/css”>
.curvetop {background:url(curve_top.gif) no-repeat; height:9px; font-size:1px}

.curvebottom {background:url(curve_bottom.gif) no-repeat; height:9px; font-size:1px}

ul {background:#8ACA80; margin:0; padding:0 10px 0 10px; list-style:none; width:157px}

li {border-bottom:1px #FFFFFF dashed}
</style>

ได้ผลดังนี้

ไม่มีอะไรมาก ก็ใส่รูปที่ .curvetop และ .curvebottom แล้วก็ใส่สี ที่ ul ใส่ เส้นประที่ li ส่วนที่ว่าทำไมต้องใส่ font-size:1px อ่านอันนี้ประกอบ การจัดการกับความสูง และ อ่าน อันนี้ด้วยก็ได้ ถ้ายังไม่เข้าใจ ul li เรียนรู้การใช้ ul li step by step

แบบที่ 2 ใช้รูป แบบนี้

= curve_top2.gif

= curve_bottom2.gif

เขียน html ดังนี้

<h2>หัวข้อ</h2>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>

เขียน css ดังนี้

<style type=”text/css”>
h2 {background:url(curve_top2.gif) no-repeat left top; padding:0; margin:0}
ul {background:url(curve_bottom2.gif) no-repeat left bottom;margin:0; padding:0 10px 10px 10px; list-style:none; width:157px}
li {border-bottom:1px #FFFFFF dashed}
</style>

ได้ผลดังนี้

แบบที่ 2 นี้ ในส่วนของการเขียนโค้ด html จะดีกว่าแบบแรก คือเราไม่มี div เปล่าๆ ที่ไม่มีความหมาย เราใช้ tag อย่างประหยัดเพียง 2 tag ใส่รูปโค้งด้านบนที่ h2 เลือกให้ชิดด้านบน (สังเกตว่า จะมี padding และ margin = 0 เพราะ h2 นั้น จะเว้นขอบบนล่างโดยธรรมชาติ ทำให้มีช่องว่างระหว่างภาพ จึงต้องกำหนดเป็น 0 ) ใส่รูป โค้งด้านล่าง ที่ ul แล้วเลือกให้ชิดล่าง ul จะแสดงรูปโดยเริ่มจากด้านล่าง กรณีนี้เราควรจะตัดรูปขอบโค้งให้ยาวซักหน่อย เผื่อการยืดยาวขึ้นของกล่อง

แบบที่ 3ใช้รูปโดยตัดเฉพาะส่วนมุม แบบนี้

= t_left.gif = t_right.gif

= b_left.gif = b_right.gif

เขียน html ดังนี้

<div id=”content”>
<span class=”tl”><span class=”tr”></span></span>
<ol>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ol>
<span class=”bl”><span class=”br”></span></span>
</div>

เขียน css ดังนี้

<style type=”text/css”>
#content{background:#8ACA80;width:200px}
ol{padding:0 10px 0 10px;margin:0;list-style:none;}
li{border-bottom:1px #FFFFFF dashed}
.tl{background:url(t_left.gif) no-repeat left top;display:block;height:9px;font-size:1px}
.tr{background:url(t_right.gif) no-repeat right top;display:block;height:9px;font-size:1px}
.bl{background:url(b_left.gif) no-repeat left bottom;display:block;height:9px;font-size:1px}
.br{background:url(b_right.gif) no-repeat right bottom;display:block;height:9px;font-size:1px}
</style>

ผลที่ได้

แบบที่ 3 นี้มีข้อดีคือ ยืดได้ ทั้ง แนวตั้งแนวนอน โดยไม่เสียรูป เพราะเราได้ ใส่ รูปภาพมุมมนไปที่ span ซ้าย ขวา บน ล่าง โดยกำหนด background ให้อยู่ตาม ตำแหน่ง ที่ต้องการ เวลาตัดรุปขอมมน ให้ตัดติดพื้นหลังสีขาวมาด้วย เพื่อ บัง ในส่วน มุมแหลมๆไว้

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

*** หากก็อปโค้ดไปใช้ ต้องแก้ที่ตัว ” ด้วยนะครับ ไม่งั้นมันจะไม่ทำงาน