Trójkąty w CSS 28 lutego 2012

W samym CSSie można zrobić całkiem sporo, a dobrym przykładem tego może być Nyan cat stworzony przez Michała Budzyńskiego . Wystarczy tylko poznać kilka sztuczek i możemy zbudować coś całkiem fajnego. Jedną z takich sztuczek jest właśnie tworzenie trójkątów za pomocą samego CSS`a.

 

Całość jest banalnie prosta a opiera się o właściwe wykorzystanie atrybutu border. Poszczególne obramowania kontenera (górne, prawe, dolne i boczne) przecinają się pod kątem 45* jeśli wielkość tych obramowań jest taka sama. Najlepiej zobrazuje to poniższy obrazek:

A więc żeby uzyskać trójkąt wystarczy stworzyć kontener o wymiarach 0x0px ustawiając odpowiednio dużą wielkość obramowania

 

div {
  width: 0; 
  height: 0;
  border-width: 30px;
  border-style: solid;   
}

 

Teraz ustawmy sobie różne kolory dla kolejnych stron obramowania

 

div {
  (...)
  border-color: red blue green yellow; 
}

 

Tutaj możesz zobaczyć efekt

 

Aby uzyskać efekt trójkąta należy jeszcze tylko ukryć 3 z 4 części obramowania za pomocą koloru transparent

 

div {
  (...)
  border-color: red transparent transparent transparent;
}

 

I w ten sposób otrzymaliśmy trójkąt :) Dodam tylko, że istnieje możliwość tworzenia różnokątnych figur, wystarczy zdefiniować różną szerokość dla kolejnych części obramowania:

 

div {
  width: 0; 
  height: 0;
  border-width: 30px;
  border-left-width: 10px;
  border-right-width: 80px;
  border-style: solid; 
  border-color: red transparent transparent transparent;
}
​

Całość działa na wszystkich testowanych przeglądarkach, z tym że na IE7 należy pamiętać o definicji height: 0;, podczas jej braku przeglądarka ustawia wysokość na jakąś dziwną defaultową wartość.