Merhaba arkadaşlar, size bu yazımda resim kullanmadan sadece css ile ribbon yapmayı anlatacağım.
Önce bir kutu açalım
1 |
<div id="kutu"></div>
|
daha sonra bu kutuyu css ile şekillendirelim;
1 2 3 4 5 6 7 8 |
#kutu {
width:300px;
height:200px;
display:block;
background-color:#DDDDDD;
margin-left:15px;
position:relative;
}
|
ve son hali;
kutumuz bu hale geldi;
şimdi başlığımızı ekleyelim;
1 2 3 |
<div id="kutu">
<div>Başlık</div>
<div>
|
sitilini de verelim;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.kutu-baslik {
background: none repeat scroll 0 0 #666666;
border-radius: 5px 5px 5px 0;
display: inline-block;
margin: 15px 0 0 -10px;
padding: 10px 15px;
text-align: center;
width: 270px;
min-height:20px;
}
|
şimdi kutumuz şu hale geldi
son olarak ta başlığın kıvrımını ekliyelim;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.kutu-baslik:before {
content:"";
position:absolute;
top:55px;
left:0;
background: none repeat scroll 0 0 #333333;
border-radius: 0 0 0 10px;
display: block;
height: 10px;
margin-left: -10px;
width: 10px;
}
|
ve son hali
Birdahaki yazıda görüşmek üzere , iyi çalışmalar
