Kulaté rohy
Obsah
Související
Toto řešení ukazuje, jak pomocí kkaskádových stylů vytvořit efektní kulaté rohy okrajů u různých elementů. Výhodou tohoto řešení oproti jiným postupům je, že využívá jen jednoho obrázku a velmi jednoduchý XHTML kód.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Petr Novák. Bližší popis najdete v článku Kulaté rohy v blokových elementech.
CSS
#obal-kul-roh
{
position:relative;
width:200px;
height:100%;
margin:10px;
padding:.5em;
font-size:.76em;
color:#000;
background:#e4effa;
border-top:15px solid #a0d9ff;
border-bottom:15px solid #a0d9ff;
border-left:15px solid #a0d9ff;
border-right:15px solid #a0d9ff;
text-align:left;
}
.horlev
{
position:absolute;
top:-15px;
left:-15px;
background:url(‚kul_roh1.gif‘) left top no-repeat #fff;
}
.horprav
{
position:absolute;
top:-15px;
right:-15px;
background:url(‚kul_roh1.gif‘) right top no-repeat #fff;
}
.dollev
{
position:absolute;
bottom:-15px;
left:-15px;
background:url(‚kul_roh1.gif‘) left bottom no-repeat #fff;
}
.dolprav
{
position:absolute;
bottom:-15px;
right:-15px;
background:url(‚kul_roh1.gif‘) right bottom no-repeat #fff;
}
.horlev, .horprav, .dollev, .dolprav
{
width:15px;
height:15px;
font-size:0px;
}
XHTML
<html>
<body>
<div id=“obal-kul-roh“>
<div class=“horlev“></div><div class=“horprav“></div><div class=“dollev“></div><div class=“dolprav“></div>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</body>
</html>
Catchamouse
Říj 18, 2009 v 11:23Nefungují mi kulaté rohy, mám je hranaté.
Jan Horak
Říj 22, 2009 v 22:03Na své stránce jsem vytvořil generátor pro HTML a CSS boxů s nejen kulatými rohy http://www.wild-web.eu/css-box-generator/
Soustředil sem se na obecnost, jde tam vložit jakýkoliv obrázek a nastavit nějaké možnosti generování. K dispozici je i galerie vytvořených boxů.
Využívejte, jak je libo, koukejte, jak jsem to vyřešil, hlavně mě netlučte.
Xsi
Říj 29, 2009 v 10:08Hehe díky. Už vím co mě vždy chybělo pro ie6. Definovat font-size: 0px; :D
To by mě nenapadlo, ani dyby mě na nože brali…
Hibs
Led 11, 2010 v 0:14Pro : Catchamouse . Máš je hranaté protože nemáš kul_roh1.gif stáhni si ho nahoře na !výsledek!