Kulatý roh stránky

19. dubna 2006

•

Pomocí tohoto řešení můžeme zarovnat text podle různě zakřiveného – například kulatého – okraje.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Eric Meyer. Bližší popis najdete v článku Curvelicious

CSS

div#hlavni
{
position: relative;
border: solid black 4px;
background: lightblue;
padding: 0 20px;
text-align: justify;
min-height: 290px;
_height: 290px; /* IE */
}
div#bg
{
background: url(’91-1.gif‘) 0 0 no-repeat;
width: 290px;
height: 285px;
position: absolute;
left: -4px;
top: -5px;
}
div.empty
{
background: transparent;
height: 1em;
float: left;
clear: left;
margin: 0;
}
.e1
{
width: 240px;
}
.e2
{
width: 180px;
}
.e3
{
width: 130px;
}
.e4
{
width: 90px;
}
.e5
{
width: 70px;
}
.e6
{
width: 50px;
}
.e7
{
width: 35px;
}
.e8
{
width: 25px;
}
.e9
{
width: 15px;
}
.e10
{
width: 10px;
}
.e11
{
width: 8px;
}
.e12
{
width: 6px;
}
.e13
{
width: 2px;
}

XHTML

<html>
<body>
<div id=“hlavni“>
<div id=“bg“></div>
<div class=“empty e1″></div>
<div class=“empty e2″></div>
<div class=“empty e3″></div>
<div class=“empty e4″></div>
<div class=“empty e5″></div>
<div class=“empty e6″></div>
<div class=“empty e7″></div>
<div class=“empty e8″></div>
<div class=“empty e9″></div>
<div class=“empty e10″></div>
<div class=“empty e11″></div>
<div class=“empty e12″></div>
<div class=“empty e13″></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus orci nisi, fringilla sed, volutpat ac, …</p>
<p>Aenean quis dolor. Praesent pharetra vestibulum ligula. Curabitur dapibus massa ut libero blandit condimentum…</p>
<p>Proin porttitor leo quis purus. Ut ante. Aliquam laoreet egestas turpis. Vivamus nunc nulla, ultrices sit amet,…</p>
</div>
</body>
</html>