CSS Polygon
Przykład 01
Spójrzmy na nasz pierwszy przykład HTML, aby utworzyć wielokąt na stronie internetowej HTML. W tym celu musimy wygenerować standardowy HTML ”.Dokument HTML ”w kodzie Visual Studio. Rozpoczęliśmy przykład HTML ze standardowym formatem tagów HTML używanych do utworzenia strony, i.mi., Html, głowa, styl, ciało itp. Tag elementu głównego tego kodu zawiera prosty tag „tytułowy” zawierający tytuł tej strony. Główny znacznik zawiera również styl tej strony, ale przez chwilę pomijamy jej wyjaśnienie. W obrębie znacznika tego kodu HTML używamy znacznika nagłówka dla standardowego nagłówka HTML, i.mi., H1.
Do utworzenia kontenera na stronie internetowej HTML używany jest znacznik „div”. Ten kontener zawierałby obraz za pomocą znacznika „IMG”, a następnie atrybutu „SRC”, aby dołączyć ścieżkę obrazu z atrybutem „Alt” do „Bitcoin”. Po tym pojemniku nasza strona HTML zawierałaby długi akapit tekstu za pomocą
Tag dla akapitów HTML. Nasze skrypty strony HTML zostały zakończone tutaj. Więc zamykamy tag ciała jako .
Teraz przyjrzymy się znaczniku stylu, aby dodać stylistykę do pojemnika „Div” naszego skryptu HTML, aby stworzyć kształt wielokąta. Po pierwsze, używamy właściwości pływakowej CSS do pociągnięcia pojemnika po lewej stronie strony HTML wraz z szerokością 250px i wysokości 160px. Ustawiliśmy kształt zewnętrznego pojemnika na wielokąt.
Następnie obraz został również przekonwertowany na kształt wielokąta za pomocą standardowej właściwości Webkit Clip-Path. Ta właściwość wykorzystuje funkcję Polygon () do utworzenia wielokąta o tych samych wartościach procentowych, których użyliśmy dla pojemnika. Styl i znaczniki zostały zakończone, a my zamierzamy wykonać ten kod.
Po uruchomieniu tego kodu HTML w przeglądarce Chrome lub Internet Explorer, mamy wyjście Phise. Standardowy kształt wielokąta został podany pojemnik, a obraz został dodany do tego pojemnika przez przekształcenie go w kształt wielokąta. Jednocześnie akapit tekstowy został wyświetlony z względną pozycją pojemnika wielokąta na naszym ekranie.
Przykład 02
Pierwszy przykład polegał na użyciu prostej funkcji wielokąta z właściwością Clip-Path, aby przypiąć obraz i przekonwertować na kształt wielokąta. W tym przykładzie będziemy tworzyć wielokąt co najmniej 4 krawędzi za pomocą prostej właściwości wielokąta lub znacznika. Zaczęliśmy więc przykład z identyfikatorem HTML śledzonym przez znacznik głowy. Ten znacznik główny używa znacznika tytułu, aby nadać tytuł naszej stronie HTML. Nie używamy żadnego znacznika stylu, ponieważ będziemy wykonywać styl inline w tym przykładowym kodzie. Tak więc „ciało” tej strony HTML zostało rozpoczęte od znacznika „ciała”, i.mi., . To podąża za metką nagłówka
dla tej strony.
Następnie wykorzystaliśmy standardowy znacznik „SVG” do wykorzystania standardowej grafiki wektorowej do tworzenia kształtu wielokąta. Wysokość i szerokość zostały ustawione na 400px dla obszaru „SVG” na stronie HTML. Rozpoczęliśmy tag z przesuniętymi „punktami”, które należy użyć do tworzenia wielokąta. Te punkty byłyby informowane o wartości x i y dla określonej krawędzi. Możesz użyć jak najbardziej licznych krawędzi. Używamy tylko 5 zgodnie z całkowitą liczbą przecinków. Stylizacja inline została użyta z słowem kluczowym „Styl”, a my używamy właściwości „wypełnij” do wypełnienia wielokąta odrobiną jasnozielonego koloru wybranego ze standardowego schematu kolorów RGB. Wraz z tym właściwość udaru została wykorzystana do stworzenia zarysu granicznego dla wielokąta w pewnym fioletowym kolorze, a właściwość szerokości skoku ustawia grubość granicy na 7px. „SVG” i treść tej strony zostały zakończone i możemy teraz wykonać ten kod w kodzie Visual Studio.
Wyjście dla kodu HTML wielokąta wyświetlało prosty nagłówek z wielokątem 4 stron. Chociaż ma 5 stron, 5. jest ukryty z powodu użycia niewielkiej wartości dla jednej strony. Widać, że kształt wielokąta został wypełniony jasnozielonym kolorem i fioletową granicą.
Przykład 03
Rzućmy okiem na inny przykład, aby stworzyć kształt wielokąta na naszej stronie HTML. W tym celu będziemy zużywać podobny znacznik SVG w naszym kodzie HTML. Począwszy od pliku kodu Visual Studio, dodaliśmy znacznik HTML, a następnie standardowy znacznik. Tym razem nie używamy znacznika głowy, tytułu ani styl.
W obrębie znacznika tego kodu rozpoczęliśmy znacznik i określliśmy szerokość i wysokość dla obszaru SVG na stronie HTML. Następnie użyliśmy znacznika wielokąta do stworzenia nowego wielokąta i dodania jego punktów i stylu. Dodaliśmy w sumie 5 krawędzi lub punktów dla tego wielokąta o różnych wartościach osi x i y. Te krawędzie są umieszczane w pozycjach ustawionych zgodnie ze stroną HTML. Polygon będzie wypełniony fioletowym kolorem, a jego tło będzie miało szkarłatny różowy kolor. Wraz z tym właściwość szerokości skoku została ustalona na 5, a reguła wypełnienia została ustawiona na nieparzyste. Oznacza to, że tam, gdzie krawędzie wielokąta przecinają się, kolor zostałby tam wypełniony.
Po uruchomieniu tego kodu HTML w przeglądarce Chrome, mamy wyjście pokazane, i.mi., Star Polygon, na ekranie strony internetowej. Ten gwiazdorski wielokąt ma 5 krawędzi z szkarłatną, różową granicą i wypełnionymi stożkami. Widać, że wewnętrzny obszar gwiazdy został niewypełniony. To dlatego, że użyliśmy ustawionej właściwości wypełniają.
Wniosek
W pierwszym akapicie omówiliśmy użycie i ewolucję kształtów w naszym życiu wraz z ich użyciem w skryptach HTML. Oprócz tego opracowaliśmy trzy bardzo różne przykłady skryptów HTML, aby stworzyć różne typy wielokątów, i.mi., Każda z nich zawiera inną liczbę boków i krawędzi. W tym celu próbowaliśmy użyć funkcji wielokąta, znacznika wielokąta i znacznika SVG, aby utworzyć kształty oparte na wektorach, właściwości ścieżki, punkty wielokąta i właściwości skoku.