Trojúhelník patří mezi nejjednodušší a nejuniverzálnější geometrické tvary. Mohou být použity v designu webových stránek, k vytvoření tlačítek, šipek, dekorací na pozadí a dalších.
Vytvořte trojúhelník pomocí CSS a HTML může se to zdát jako výzva pro začátečníka, ale ve skutečnosti je to docela jednoduché. Existuje několik způsobů, jak vytvořit trojúhelníky pomocí CSS, ale jednou z nejběžnějších metod je použití CSS pseudoelementu ::after nebo ::before . Tyto pseudoelementy umožňují přidat k prvku další styly, včetně vytvoření trojúhelníku.
Je důležité poznamenat, že k vytvoření trojúhelníku pomocí CSS a HTML není nutné používat obrázky nebo SVG, vše se provádí pomocí kódu.
Jak vytvořit trojúhelník
K vytvoření trojúhelníku použijeme vlastnost border . Nastavíme šířku a výšku prvku a nastavíme jednu z hodnot vlastnosti border-width na nulu. K této vlastnosti se vrátíme později.
Dále nastavíme pouze jednu hranici prvku pomocí vlastnosti border-width . Použijeme hranici odpovědnou za horní stranu trojúhelníku. Tuto hranici určíme správnou šířkou i barvou.
Nyní máme prvek s jednou horní hranicí, která vizuálně vypadá jako trojúhelník. Trojúhelník však bude natřen barvou pozadí prvku. Aby to bylo transparentní, nastavíme vlastnosti background-color na transparent .
A posledním krokem je zaoblení úhlu trojúhelníku, který musíme udělat ostrý. To se provádí pomocí vlastnosti border-radius .
A Hle, váš trojúhelník je připraven! Nyní můžete spravovat jeho velikost , barvu a tvar pomocí zadání různých hodnot vlastností border , border-width, background-color a border-radius .
Pomocí CSS a HTML vytvořte geometrický obrazec
Pomocí CSS a HTML lze snadno vytvořit různé geometrické tvary, jako je trojúhelník, čtverec, kruh a další. V této části se podíváme na to, jak vytvořit trojúhelník pomocí CSS a HTML.
Pro začátek vytvoříme kontejner, ve kterém bude umístěn náš trojúhelník. To lze provést pomocí značky nebo . Přidáme následující kód:
Dále přidáme styly pro náš trojúhelník uvnitř značky . K tomu použijeme pseudoelement :: before nebo:: after:
.triangle
V kódu výše jsme uvedli šířku a výšku prvku na nulu, abychom vytvořili trojúhelník. Okraje levé a pravé strany trojúhelníku jsou označeny jako polovina jeho šířky, aby se vytvořil rovnoramenný trojúhelník. Hranice spodní strany je dána úplnou šířkou trojúhelníku a my jsme uvedli barvu ohraničení na #000, což je černá barva.
Nyní, když jsme vytvořili kontejner a přidali styly pro trojúhelník, je vidět výsledný tvar. Jednoduše zapněte tento kód do dokumentu HTML a podívejte se na výsledek.
Tímto způsobem lze pomocí CSS a HTML snadno vytvářet různé geometrické tvary a trojúhelník je pouze jedním z příkladů.
Připojte styly CSS k prvku HTML
Chcete-li vytvořit trojúhelník pomocí CSS a HTML, musíme nejprve připojit styly CSS k prvku HTML. K tomu můžeme použít značku