Home > เริ่มต้นกับ CSS > ทำกล่องขอบโค้งด้วย css

ทำกล่องขอบโค้งด้วย css

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

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

curve_top.gif = curve_top.gif

curve_bottom.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>

ได้ผลดังนี้

curvebox1.gif

ไม่มีอะไรมาก ก็ใส่รูปที่ .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>

ได้ผลดังนี้

curve_box2.gif

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

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

t_left.gif = t_left.gif t_right.gif = t_right.gif

b_left.gif = b_left.gif b_right.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>

ผลที่ได้

curve_box3.gif

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

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

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

Related Articles


About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. January 17th, 2008 at 20:28 | #1

    เยี่ยมครับ บทความนี้
    ไม่เคยเห็นบทความของคนไทยเกี่ยวกับ CSS มาก่อนเลย เยี่ยมจริงๆครับ
    ชอบๆๆๆๆ ได้ความรู้เยอะดี โดยเฉพาะพวกเทคนิคสำหรับ SEO

    ขอบคุณครับสำหรับเว็บดีๆ ไปเยี่ยมเว็บผมได้นะครับ พึ่งจะทำได้ไม่นานเองครับ ยังมีไม่เยอะ แต่กำลัง up อยู่ คิดว่าน่าจะใกล้ๆกัน…เกี่ยวกับ Web เหมือนกัน :-?:)

  2. February 19th, 2008 at 18:58 | #2

    เยี่ยมเลยนะ วิธีนี้ ชอบๆ:d

  3. paradise29
    April 12th, 2008 at 17:52 | #3

    นั่งอ่านแล้วลองทำตามครับ…

    แต่ทำให้เป็นกรอบที่ขอบรูป…นั่งงมตั้งนาน…

    สิ่งที่ยากที่สุดในเรื่องของ…CSS ในความคิดผมคือ…ไม่รู้ว่าค่าไหน…

    เอาไว้ใช้ทำอะไร…มีเว็บไหนแนะนำไหมครับ…ว่าแต่ละค่าใช้งานอย่างไร

    img{
    border: 1px dashed #ccc;
    margin:10px;
    background:#fff;
    padding:4px;
    }

  4. ^One-Piece^
    April 23rd, 2008 at 13:24 | #4

    ยอดเยี่ยมเลยครับ

  5. May 27th, 2008 at 11:06 | #5

    น่าสนใจดีครับ ได้ความรู้เพิ่มขึ้นด้วย
    ขอบคุณมากครับ

  6. Por
    June 5th, 2008 at 15:04 | #6

    สอนได้ดีมาครับ ขอบคุณมากๆ

  7. July 22nd, 2008 at 10:52 | #7

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

  8. April 17th, 2009 at 14:33 | #8

    ชอบๆๆ จังเลยอ่ะ โดนใจมากๆ

  9. มด
    May 9th, 2009 at 17:48 | #9

    ต้อง ขอ บอก ว่า เยี่ยม มาก ไม่ มี กั๊ก เลย

  10. p
    June 20th, 2009 at 12:34 | #10

    ทำใส่อะไรกันหรอครับ

    ดรีมหรือว่าอะไรครับ

    อยากทำแต่ผมไม่รู้ว่าเค้าทำใส่ในโปรแกรมอะไรอะครับ

  11. wut
    October 29th, 2009 at 22:57 | #11

    ทำไมเวลารันกับ ie7 มันไม่ได้ แต่กับ Firefox ได้ แบบที่ 1 ครับ แนะนำด้วยครับ:((:((:((:((:((

  12. neenarat
    November 24th, 2009 at 22:32 | #12

    ดีจังเลย จะได้เอาไปหัดทำส่งอาจารย์:d/

  13. April 20th, 2010 at 20:49 | #13

    ตามมาเก็บวันละบทความครับ
    วันนี้ก็ยอดเยี่ยมอีกเช่นเคย ไม่มีกั๊กเลย ของดีๆทั้งน๊านนน

    ไม่คิดจะเปิดคอร์สสอนบ้างเหรอครับ น่าจะได้ลูกศิษย์เยอะเลยนะครับ สอนเก่งๆแบบนี้ด้วย

    ขอบคุณอีกครั้งครับ
    วิท (http://www.tutorpoint.net)

  14. sensofdesign
    May 21st, 2010 at 08:37 | #14

    ขอบคุณนะค่ะ.. เยี่ยม เจ๋ง:d/

  15. August 29th, 2010 at 02:38 | #15

    ขอบคุรมากคะ แหล่งความรู้สุดยอด

  16. thanyapat
    September 6th, 2010 at 16:52 | #16

    ขอบคุณค่ะ ชอบ ชอบ \:d/

  17. June 4th, 2012 at 15:29 | #17

    โห ขอบคุณมากครับ

  18. September 2nd, 2012 at 13:16 | #18

    ได้ความรู้มากขึ้นครับ ขอบคุณมาก

  1. No trackbacks yet.