Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Figury geometryczne

Trójkąty

Email Drukuj PDF

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

Punktem wyjścia niech będzie kwadratowy pojemnik o wymiarach width:100px; i height:100px. Odsuniemy go nieco od lewego marginesu, aby był lepiej widoczny.

Szerokość i wysokość decydują o wielkości białego obszaru w środku. Natomiast definicje obramowania powodują, że do obszaru tego dokładany jest jeszcze dodatkowy obszar zajęty przez różnokolorowe obramowania - jak wiadomo, przeglądarka interpretuje je w ten sposób, że linie zetknęcia obramowań są pochylone pod pewnym kątem, a gdy wszystkie obramowania mają równą szerokość, linie mają kąt nachylenia 45o.

div.fig1	
{
width:100px;
height:100px;
position:relative; left:50px;
border-left:50px solid yellow;
border-top:50px solid green;
border-right:50px solid red;
border-bottom:50px solid blue;
}


Gdy teraz zmniejszymy rozmiary pojemnika do 0,0, pozostaną same obramowania. Jak widzisz, to punkt wyjścia do skonstruowania trójkąta.

div.fig2
{
width:0px;
height:0px;
position:relative; left:50px;
border-left:50px solid yellow;
border-top:50px solid green;
border-right:50px solid red;
border-bottom:50px solid blue;
}


Nadając teraz konkretnemu obramowaniu przezroczystość zamiast koloru spowodujemy, że nie będzie ono widoczne w pojemniku. W przykładzie zastosujmy ten zabieg do wszystkich, oprócz lewego.

div.fig3
{
width:0px;
height:0px;
position:relative; left:50px;
border-left:50px solid yellow;
border-top:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
}


Analogicznie można postąpić z innymi obramowaniami, np.:

div.fig4
{
width:0px;
height:0px;
position:relative; left:50px;
border-left:50px solid transparent;
border-top:50px solid green;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
}


Jeśli zechcesz, aby boki trójkąta (przyprostokątne) miały inne nachylenie, możesz użyć w definicji zróżnicowanych grubości obramowania.

div.fig5
{
width:0px;
height:0px;
position:relative; left:50px;
border-left:50px solid transparent;
border-top:75px solid transparent;
border-right:100px solid red;
border-bottom:125px solid transparent;
}


Jeśli zastosujesz obrót pojemnika (musisz zastosować prefiksy dla Opery, Firefoksa i Chrome - Internet Explorer nie akceptuje obrotu), trójkąty będą obrócone:

div.fig6
{
width:0px;
height:0px;
position:relative; left:50px;
border-left:50px solid yellow;
border-top:50px solid green;
border-right:50px solid red;
border-bottom:50px solid blue;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}


Nadając teraz wybranym obramowaniom przezroczystość, utworzymy pojedyncze trójkąty, np.:

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


Jest jednak inna technika, która pozwoli wyświetlać "obrócone" trójkąty także w IE. Polega ona na połączeniu dwóch sąsiadujących trójkątków. Prześledźmy to po kolei.

Wyświetlamy wszystkie obramowania w różnych kolorach:

div.fig8 
{
width:0px;
height:0px;
position:relative; left:50px;
border-left: 50px solid red;
border-top: 50px solid green;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
}


Pozostawiamy tylko dwa obramowania:

div.fig9
{
width:0px;
height:0px;
position:relative; left:50px;
border-left:50px solid red;
border-top:50px solid green;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
}


Obu obramowaniom nadajemy ten sam kolor:

div.fig10
{
width:0px;
height:0px;
position:relative; left:50px;
border-left:50px solid red;
border-top:50px solid red;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
}


Oczywiście mamy tu już dwa większy trójkąt (z dwóch pierwotnych), ale możemy swobodnie manipulować jego wielkością.

I jeszcze jeden sposób, wykorzystujący usuwanie niektórych obramowań.

Zacznijmy od pokazania wszystkich obramowań:

div.fig11
{
width:0;
height:0;
position:relative; left:50px;
border-left:100px solid yellow;
border-top:50px solid green;
border-right:100px solid red;
border-bottom:50px solid blue;
}

Usuwamy dolne obramowanie, obcinając dolną połowę koperty.

div.fig12
{
width:0;
height:0;
position:relative; left:50px;
border-left:100px solid yellow;
border-top:50px solid green;
border-right:100px solid red;
}

Nadajemy przezroczystość prawemu i górnemu obramowaniu.

div.fig13
{
width:0;
height:0;
position:relative; left:50px;
border-left:100px solid yellow;
border-top:50px solid transparent;
border-right:100px solid transparent;
}
 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V