Css - Resim Kullanmadan Oval Köşeli Tablolar

Css - Resim Kullanmadan Oval Köşeli Tablolar
Css Resim Kullanmadan Oval Köşeli Tablolaroval köşelere sahip katmanlar yaratmak çok kolaymış halbuki Yok yok herhangi bir javascript kodu kullanmadan yapacağız

Kullanmanız gereken CSS kodları şöyle;

<style type="text/css">
#metin_banner {width:200px;}
#metin_banner h1, #metin_banner h2 {margin:0 10px; letter-spacing:1px;}
#metin_banner h1 {font-size:2.5em; color:#fff;}
#metin_banner h2 {font-size:2em;color:#06a; border:0;}
#metin_banner h2 {padding-top:0.5em;}
#metin_banner {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}
</style>

Ve katman etiketlerimiz ise şunlar;

<div id="metin_banner">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">

<h1><a href="">Örnek Başlık</a></h1>
<h2>Örnek bir açıklama</h2>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

[ Geri ] - [ Ana Sayfa ] -