Kurs języka HTML i CSS

Tematy: Trójkąty | Owale | Czworokąty | Wielokąty

Punktem wyjścia jest prostokątny pojemnik. Zaokrąglenia tworzące owale uzyskujemy za pomocą rozmaitych wersji polecenia border-radius tworzącego zaokrąglone obramowania.

Elipsę tworzymy z pojemnika o różniących się szerokości i wysokości, np. width:200px; height:100px;. Firefox 3.x wymaga użycia, obok czystej definicji border-radius, prefiksu -moz-.

Uzyskanie pełnego zaokrąglenia (gdzie nie pojawia się żaden prosty fragment obramowania) wymaga użycia wartości wynoszącej 50% boku - ze względu na interpretację w Firefoksie i Operze trzeba ją podawać w pikselach, a więc dopasowywać do długości boku. Użycie wygodniejszej wartości 50% powoduje, że Firefox i Opera wyświetlają zaokrąglenie błędnie (Chrome poprawnie)

Zaokrąglenie narożnika wymaga tu podania pary wartości, np. dla prostokąta o szerokości 200 pikseli i wysokości 100 pikseli musimy podać border-radius: 100px / 50px;. Wartość przed ukośnikiem definiuje zaokrąglenie przed narożnikiem (patrząc zgodnie z ruchem wskazówek zegara), natomiast po ukośniku - za nim.

div.elipsa1
{
width:200px; 
height:100px;
background-color:gainsboro;
border-radius:100px / 50px;
-moz-border-radius:100px / 50px;
}

Gdyby elipsa miała być "stojąca", a nie "leżąca", powinniśmy przyjąć większą wysokość niż szerokość.

div.elipsa2
{
width:100px; 
height:200px;
background-color:gainsboro;
border-radius:50px / 100px;
-moz-border-radius:50px / 100px;
}

Elipsa może być nachylona, jednak wymaga to użycia transformacji w postaci rotacji pojemnika. Trzeba przy tym pamiętać, że w Chrome, Opera i Firefox wymagają użycia prefiksów, zaś Internet Explorer nie obsługuje obrotu.

div.elipsa3
{
width:200px; 
height:100px;
margin-bottom:30px;
margin-top:30px;
background-color:gainsboro;
border-radius:100px / 50px;
-moz-border-radius:100px / 50px;
transform:rotate(45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
}

Utworzenie okręgu (czyli szczególnego przypadku elipsy) wymaga użycia równej wysokości i szerokości pojemnika oraz 50-procentowego zaokrąglenia podanego w pikselach. Wystarczy tu podać jedną wartość, a nie parę.

div.okrag1
{
width:150px;
height:150px;
background-color:gainsboro;
border-radius:75px;
-moz-border-radius:75px;
}

Jakiekolwiek inne sposoby zaokrąglenia nie tworzą już elipsy czy koła, lecz jedynie pojemniki z zaokrąglonymi narożnikami.

Przykładowo, jeśli ma to być zaokrąglenie tylko wybranych narożników, powinniśmy użyć precyzyjnie określonych wartości pikselowych uwzględniających rozmiary pojemnika.

div.zaokr1
{
width:200px; 
height:100px;
background-color:gainsboro;
border-radius:50px 0px 0px 50px;
-moz-border-radius:50px 0px 0px 50px;
}

Dopasowując boki i zaokrąglenia narożników, można uzyskać półokrąg.

div.zaokr2
{
width:200px; 
height:100px;
background-color:gainsboro;
border-radius:100px 100px 0px 0px;
-moz-border-radius:100px 100px 0px 0px;
}

lub

div.zaokr3
{
width:100px; 
height:200px;
background-color:gainsboro;
border-radius:0px 100px 100px 0px;
-moz-border-radius:0px 100px 100px 0px;
}