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

posted on 16 Dec 2007 12:37 by pommatt in CSS

วันนี้มาน้งเล่นที่ office คิดอยากเล่นกับ CSS ในการทำให้มุมโค้งเล่น เผื่อเอาไว้ใช้มาดูกันเลยขั้นแรก เราต้องหาภาพของมุม 4 มุมกันก่อนดังนี้

CSS Code :

body {
margin: 0;
padding: 5px;
background-color: #E4E2E4;
}

.wrapper {
width: 800px;
margin: 5px auto 5px;
}

.bl {
background: url(../images/bl.gif) 0 100% no-repeat #BCC6DC;
width: 100%;
}

.br {
background: url(../images/br.gif) 100% 100% no-repeat
}

.tl {
background: url(../images/tl.gif) 0 0 no-repeat
}

.tr {
background: url(../images/tr.gif) 100% 0 no-repeat;
padding: 10px;
min-height: 600px;
}

.clear {
font-size: 1px;
height: 1px
}

Code Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <title>Rounded corner</title>
        <link rel="stylesheet" href="css/index.css"/>
    </head>
    <body>
        <div class="wrapper">
            <div class="bl">
                <div class="br">
                    <div class="tl">
                        <div class="tr">
                           <p>pommatt !!!!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
    </body>
</html>

ผลรับ: