Autor publikacji
Virtual Patriot - Administrator

polygon()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji polygon()

Za pomocą funkcji polygon() możemy określić kształt w postaci wielokąta.

Parametry funkcji polygon()

Przykładowe zapisy

polygon(25px 25px, 25px 125px, 125px 125px)

polygon(-25px -25px, 75px 225px, 275px 225px, 225px 25px)

polygon(evenodd, 48px 16px, 16px 96px, 96px 48px, 0px 48px, 80px 96px)

polygon(nonzero, 48px 16px, 16px 96px, 96px 48px, 0px 48px, 80px 96px)

style

Parametr style nie jest wymaganym parametrem funkcji polygon(). Parametr style określa, w jaki sposób powinno zostać wypełnione wnętrze nowo powstałego wielokątnego kształtu.

Wartość domyślna

nonzero

Dostępne wartości parametru style

evenodd

Wartość evenodd parametru style sprawia, że wnętrze nowo powstałego wielokątnego kształtu będzie wypełnione w stylu evenodd. Styl evenodd sprawia, że fragment wnętrza należący do nowo powstałego wielokątnego kształtu będzie wypełniony tylko wtedy, gdy rezultatem pewnego obliczenia jest liczba nieparzysta. Wspomniane obliczenie polega na sprawdzeniu ilości miejsc, w których prosta poprowadzona (w dowolnym kierunku) z dowolnego punktu należącego do fragmentu wnętrza nowo powstałego wielokątnego kształtu przecina się z innymi napotkanymi na swojej drodze prostymi tworzącymi nowo powstały wielokątny kształt.

polygon(evenodd, x1 y1, x2 y2, x3 y3, x4 y4, x5 y5)

styl evenodd funkcji polygon() w praktyce

nonzero

Wartość nonzero parametru style sprawia, że wnętrze nowo powstałego wielokątnego kształtu będzie wypełnione w stylu nonzero. Styl nonzero sprawia, że fragment wnętrza należący do nowo powstałego wielokątnego kształtu będzie wypełniony tylko wtedy, gdy rezultatem pewnego obliczenia jest liczba różna od liczby 0. Wspomniane obliczenie rozpoczyna się od liczby 0 oraz polega na sprawdzeniu ilości miejsc, w których prosta poprowadzona (w dowolnym kierunku) z dowolnego punktu należącego do fragmentu wnętrza nowo powstałego wielokątnego kształtu przecina się z innymi napotkanymi na swojej drodze prostymi tworzącymi nowo powstały wielokątny kształt. Gdy we wspomnianym miejscu przecięcia się prostych, prosta tworząca nowo powstały wielokątny kształt posiada kierunek zgodny z ruchem wskazówek zegara, wtedy do obliczenia dodawana jest liczba 1, w przeciwnym wypadku do obliczenia dodawana jest liczba -1.

polygon(nonzero, x1 y1, x2 y2, x3 y3, x4 y4, x5 y5)

styl nonzero funkcji polygon() w praktyce

coords

Parametr coords jest wymaganym parametrem funkcji polygon(). Parametr coords określa pary wartości kolejnych współrzędnych, na podstawie których powinien zostać utworzony nowy wielokątny kształt.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Sposób podawania

należy podać przynajmniej trzy współrzędne składające się z dokładnie dwóch wartości każda. Możemy podać więcej współrzędnych, dzięki czemu możemy tworzyć bardziej skomplikowane wielokąty, a nie tylko trójkąty. Każdą kolejną współrzędną należy oddzielić od poprzedniej współrzędnej dokładnie jednym znakiem przecinka. Wartości każdej współrzędnej należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji). Pierwsza wartość współrzędnej określa przesunięcie punktu (na podstawie którego powstaje nowy wielokątny kształt) w poziomie względem lewego górnego rogu obszaru pierwotnego, którego kształt chcemy zmienić (wartości dodatnie przesuwają w prawo, wartości ujemne przesuwają w lewo). Druga wartość współrzędnej określa przesunięcie punktu (na podstawie którego powstaje nowy wielokątny kształt) w pionie względem lewego górnego rogu obszaru pierwotnego, którego kształt chcemy zmienić (wartości dodatnie przesuwają w dół, wartości ujemne przesuwają w górę).

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru obszaru pierwotnego, którego kształt chcemy zmienić (pierwsza wartość każdej współrzędnej liczona jest względem aktualnego rozmiaru szerokości wspomnianego obszaru, a druga wartość każdej współrzędnej liczona jest względem aktualnego rozmiaru wysokości wspomnianego obszaru)

Wartość domyślna

brak

polygon(150px 100px, 450px 120px, 350px 200px, 50px 180px)

zmiana kształtu obszaru wnętrza elementu HTML za pomocą funkcji polygon()

Występowanie funkcji polygon()

  1. clip-path
  2. shape-outside

Przykład funkcji polygon()

  clip-path:polygon(50px 50px, 420px 30px, 220px 200px, 100px 160px);
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Obszar przykładowego elementu "div" został przycięty do kształtu przypominającego kształt wielokąta, ponieważ do wspomnianego elementu "div" została dodana właściwość "clip-path" wraz z wartością w postaci funkcji "polygon()", w której to funkcji zostały użyte następujące wartości: "50px 50px, 420px 30px, 220px 200px, 100px 160px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        clip-path:polygon(50px 50px, 420px 30px, 220px 200px, 100px 160px);
        -webkit-clip-path:polygon(50px 50px, 420px 30px, 220px 200px, 100px 160px);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

Interpretacja funkcji polygon()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .