Kurs języka HTML i CSS

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

Prostokąt

Punktem wyjścia jest naturalnie prostokątny pojemnik, który możemy przekształcać na rozmaite sposoby, tworząc z niego czworokąty.

div.prostokat
{
width:100px;
height:200px;
background-color:khaki;
}

Kwadrat

Kwadrat jest szczególnym przypadkiem prostokąta, w którym wszystkie boki są równe.

div.kwadrat
{
width:100px;
height:100px;
background-color:khaki;
}

Równoległobok

Równoległobok to czworokąt, ktory ma dwie pary równoległych boków. Każdy równoległobok można skonstruować za pomocą kilku połączonych ze sobą trójkątów, jednak do ich tworzenia powinniśmy stosować transformacje dostępne w specyfikacji CSS3. Na razie (marzec 2011) obsługują je, z użyciem prefiksów, Firefox, Opera i Chrome - Internet Explorer 9 RC1 jeszcze nie potrafi ich wyświetlać.

Równoległobok o pochylonych bokach górnym i dolnym (w przykładzie stosujemy jeszcze dodatkowe marginesy górny i dolny, aby obiekt na nachodził na elementy przed nim i po nim). Pochylenie uzyskujemy za pomocą transform:skew(Xdeg,Ydeg)

div.rownoleglobok1
{
width:200px;
height:100px;
background-color:khaki;
-webkit-transform:skew(0deg,20deg); 
-moz-transform:skew(0deg,20deg); 
-o-transform:skew(0deg,20deg); 
transform:skew(0deg,20deg); 
}

Równoległobok o pochylonych bokach lewym i prawym.

div.rownoleglobok2
{
width:200px;
height:100px;
background-color:khaki;
-webkit-transform:skew(30deg,0deg); 
-moz-transform:skew(30deg,0deg); 
-o-transform:skew(30deg,0deg); 
transform:skew(30deg,0deg); 
}

Romb

Romb to czworokąt o równych bokach, ale niekoniecznie równych kątach (kwadrat jest szczególnym przypadkiem rombu, o kątach 90⁰).

Romb możemy zbudować z kwadratu za pomocą pochylenia boków o ten sam stopień, aby zachować równą ich długość. Mamy jednak ograniczone możliwości ustawiania rombu w wybranej pozycji.

div.romb1
{
width:100px;
height:100px;
background-color:khaki;
-webkit-transform:skew(20deg,20deg); 
-moz-transform:skew(20deg,20deg); 
-o-transform:skew(20deg,20deg); 
transform:skew(20deg,20deg); 
}

Inny sposób to wykorzystanie obramowań (pokazany w rozdziale o trójkątach) i treści automatycznie generowanej za pomocą pseudoklasy :before lub :after.

Najpierw tworzymy "kopertę".

div.koperta
{
width:0px;
height:0px;
position:relative; left:150px;
border-left: 60px solid red;
border-top: 30px solid blue;
border-right: 60px solid green;
border-bottom: 30px solid brown;
}

Następnie dopisujemy styl z pseudoklasą :before, dopasowując jego położenie tak, aby kolejna koperta poprzedzałą wyjściową.

div.koperta:before
{
content:"";
width:0px;
height:0px;
position:absolute; left:-180px; top:-30px;
border-left: 60px solid red;
border-top: 30px solid blue;
border-right: 60px solid green;
border-bottom: 30px solid brown;
}

W kolejnym kroku środkowym trójkątom nadajemy ten sam kolor, a zewnętrznym przezroczystość.

Możemy swobodnie modyfikować rozmiary rombu, jak też obracać go.

Trapez

Trapez to figura o jednej parze boków równoległych.

Trapez równoramienny

W konstrukcji wykorzystujemy obramowania, podobnie jak w przypadku trójkątów, ale tym razem przyjmujemy dodatnią szerokość pojemnika. Po wygaszeniu (w tym przykładzie) górnego obramowania i przyjęciu identycznych wielkości lewego (czerwone) i prawego (zielone) obramowania uzyskujemy trapez równoramienny (kolor khaki). Gdybyśmy przyjęli wartość transparent dla lewego i prawego obramowania, trapez byłby oczywiście widoczny bez tych obramowań.

div.trapez
{
width:100px;
height:0px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 100px solid khaki;
border-top: 0px solid khaki;
}

Trapez różnoramienny

Przyjmując wartości poprzedniego przykładu, ale różnicując prawe i lewe obramowanie, uzyskujemy trapez dowolny.

div.trapezdowolny
{
width:100px;
height:0px;
border-left: 30px solid transparent;
border-right: 70px solid transparent;
border-bottom: 100px solid khaki;
border-top: 0px solid khaki;
}

Trapez prostokątny

Przyjmując wartość lewego obramowania 0, uzyskujemy trapez prostokątny - oczywiście równie dobrze wartość 0 można przyjąć dla prawego obramowania.

div.trapezprostokatny
{
width:100px;
height:0px;
border-left: 0px solid transparent;
border-right: 70px solid transparent;
border-bottom: 100px solid khaki;
border-top: 0px solid khaki;
}

Trapezoid

Trapezoid to figura niemająca żadnej pary boków równoległych.

div.trapezoid
{
width:0px;
height:0px;
position:relative; left:100px;
border-left: 30px solid transparent;
border-top: 50px solid transparent;
border-right: 70px solid khaki;
border-bottom: 100px solid khaki;
}

Deltoid

Deltoid to figura o dwóch parach kolejnych boków równych - tworzy "latawiec", co widać zwłaszcza po obróceniu figury o 45 stopni.

div.deltoid
{
width:0px;
height:0px;
position:relative; left:100px;
border-left: 30px solid transparent;
border-top: 30px solid transparent;
border-right: 100px solid khaki;
border-bottom: 100px solid khaki;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}