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;
}
