CSS - rysowanie poligonów (clip-path: polygon())

Deklaracja clip-path: z przypisaną wartością polygon() pozwala na rysowanie poligonów o dowolnych kształtach. W ramach niej wpisane są pary procentów oddzielone przecinkami określającymi miejsce znajdowanie się węzła.

• 0% 0% - górny lewy róg
• 100% 0% - górny prawy róg
• 0% 100% - dolny lewy róg
• 100% 100% - dolny prawy róg

zatem:

• 50% 0 - środek górnej granicy
• 50% 100% - środek dolnej granicy
• 0% 65% - 65% licząc od góry lewej krawędzi

Poniżej znajdziesz również link do on-linowego generatora poligonów, z którego można skopiować css

Przykładowa zawartość klasy style.css

      header {
        background-color: red;
        text-align: center;
        clip-path: polygon(50% 0%, 100% 0, 100% 65%,50% 100%, 0 65%, 0 0);

Tutaj jak wygląda to w praktyce:

See the Pen clip-path: poligon() by Mikołaj Kostyrko (@mkostyrko) on CodePen.

Przy pomocy narzędzi deweloperskich FireFox lub Chrome można również manipulować ręcznie wartościami tak jak to jest przedstawione na poniższym filmie: Zobacz 30 sekund tego filmu, żeby się przekonać jakie to proste:

Generator poligonów

http://www.cssplant.com/clip-path-generator

Inne dopuszczalne wartości oraz ich funkcje

circle() - tworzy koło/wartość wpisywana w pikselach

ellipse() - twrzoy elipeś/piksele

inset() - wcięcie lub też wycięcie obiektu wewnątrz/procenty

inset-rectangle() - podobnie jak inset

Źródło:

https://youtu.be/rXuHGLzSmSE?t=276

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-pat