Bildiğiniz gibi arkadaşlar bazı sitelerde menülerde filan kıvrımlar oluyor resimle gösterecek olursak aşağıdaki gibi

gördüğünüz gibi CSS3 ile ribbon yapacağız.

html sayfamız aşağıdaki gibi olacak

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3D CSS Ribbon

I Have Used Only CSS, friends!

For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.
It doesn't work with IE!

Go to the tutorial!

style.css dosyamızda aşağıdaki gibi olacak.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}

:focus {
outline: 0;
}
/* // Reset */

body {
background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
font-size: 12px;
color: #999;
}

h2 {
font-style: italic;
font-weight: normal;
line-height: 1.2em;
}

div#container {
margin: 50px auto 0px auto; /* centered */
width: 400px;
}

.bubble {
clear: both;
margin: 0px auto;
width: 350px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
background: #7f9db9;
height: 50px;
width: 380px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}

evet arkadaşlar bu kodlarla yapabilirsiniz ribbonları ama zaten ben size hazırının dosyasını vereceğim ordaki kodları inceleyerek sizlerde sitelerinizde kullanabilirsiniz.

demo: http://www.pvmgarage.com/downloads/ribbon/

indir: http://www.pvmgarage.com/downloads/ribbon.zip

pvmgarage.com dan alıntıdır.