Jak nakreslit čtverec v css: jednoduché způsoby a příklady

Čtverec je jedním z nejjednodušších a nejznámějších geometrických tvarů a v CSS jej lze nakreslit pouze několika řádky kódu! Pokud se chcete naučit vytvářet a stylizovat čtverce v CSS, musíte se seznámit s některými základy.

Jedním ze způsobů, jak nakreslit čtverec v CSS, je použít vlastnost width pro určení délky strany čtverce a vlastnosti background-color pro zadání barvy čtverce. Například následující kód vytvoří čtverec se stranou 100 pixelů a červeným pozadím:

.square

Pokud potřebujete vytvořit čtverec s prázdným středem, můžete použít záporné hodnoty odsazení pro středové strany čtverce:

.square

Kromě toho můžete pomocí CSS otáčet čtverce, přidávat ohraničení, stíny a používat různé efekty. Pomocí různých vlastností CSS a jejich kombinací můžete vytvořit čtverce s nejrůznějšími vnějšími vlastnostmi!

Vytvoření prvku čtverce v HTML a CSS

Nyní máme prvek, který bude představovat čtverec. Dále přidáme styly k našemu prvku, aby vypadal jako čtverec. K tomu použijeme CSS:

#квадрат

V uvedeném příkladu jsme nastavili šířku a výšku čtverce na 100 pixelů. Barva pozadí je nastavena na červenou. Tyto hodnoty lze měnit podle požadavků nebo preferencí.

Po použití stylů bude prvek s identifikátorem "čtverec" vypadat jako červený čtverec se stranou 100 pixelů.

Nyní víte, jak vytvořit prvek čtverce v HTML a CSS. Jednoduše vytvořte prvek pomocí značky div, přiřaďte mu jedinečný identifikátor a přidejte styly, aby vypadal jako čtverec. V případě potřeby můžete vždy změnit velikost a barvu čtverce pomocí vlastností CSS.

Nastavení velikosti čtverce

Chcete-li upravit rozměry čtverce v CSS, můžete použít vlastnost width a height .

Hodnoty můžete použít v pixelech (px ), procentech ( % ), viewportech (vw a vh ) a dalších měrných jednotkách.

.square

To udává čtverec rozměry 300 pixelů na šířku a 300 pixelů na výšku.

Přidání barvy na čtverec

Chcete-li přidat barvu čtverci do CSS, můžete použít vlastnost background-color . Tato vlastnost vám umožňuje nastavit barvu pozadí položky.

Chcete-li nastavit barvu čtverce, musíte zadat jeho třídu v CSS souboru a použít vlastnost background-color na tuto třídu. Například pokud se třída čtverce nazývá .square, kód pro zadání barvy může vypadat takto:

V tomto příkladu bude čtverec natřen modrou barvou. Můžete použít libovolnou barvu dostupnou v CSS: název barvy (například blue ), hexadecimální kód (#0000FF), RGB nebo HSL hodnoty.

Pokud chcete nastavit transparentní pozadí, můžete použít hodnotu transparent . Například:

Nyní bude mít čtverec průhledné pozadí.

Pro pozadí prvku lze také použít různé efekty, jako jsou přechody, obrázky atd. k tomu je třeba použít jiné vlastnosti a hodnoty CSS.

Změna stylů hrany čtverce

Styl ohraničení čtverce lze změnit pomocí vlastnosti border-style . Tato vlastnost vám umožňuje vybrat si z různých stylů ohraničení, jako je pevná čára, Tečkovaná čára, Tečkovaná čára a další.

Příklad použití vlastnosti border-style :

.square

V tomto příkladu bude mít hrana čtverce Tečkovaný styl. Barvu ohraničení můžete také nastavit pomocí vlastnosti border-color a tloušťky ohraničení pomocí vlastnosti border-width .

Příklad použití vlastností border-color a border-width :

.square

V tomto příkladu bude mít okraj čtverce jednobarevný styl, červenou barvu a tloušťku 2 pixely.

Vytváření efektů na čtverci pomocí stínů

Použití stínů umožňuje dát čtverci různé efekty a stylizaci. V CSS existuje několik způsobů, jak přidat stíny:

1. Možnost nastavit barvu stínu: Pomocí vlastnosti box-shadow lze nastavit hodnotu barev, například box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); . Takový kód vytvoří čtverec se stínem posunutím 10px doprava a 10px dolů, poloměrem rozostření 5px a průsvitnou černou barvou.
2. Možnost nastavit úhel stínu: pomocí vlastnosti box-shadow můžete nastavit úhel, pod kterým bude stín umístěn. Například box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.5); vytvoří čtverec se stínem posunutým o 4px doprava a dolů s poloměrem rozostření 10px, rozšířením 1px a průsvitnou černou barvou.
3. Možnost kombinace více stínů: pomocí vlastnosti box-shadow lze nastavit více stínů pro čtverec. Například box-shadow: 10px 10px 5px rgba(0, 0, 0, 0, 0.5), - 10px-10px 5px rgba(255, 255, 255, 0.5); vytvoří čtverec se dvěma stíny: jeden stín je posunut o 10px doprava a dolů, s poloměrem rozostření 5px a průsvitnou černou barvou, zatímco druhý stín je posunut o 10px doleva a nahoru, s poloměrem rozostření 5px a průsvitnou bílou barvou.

Pomocí těchto metod můžete na webové stránce vytvářet různé efekty a stylizace pro čtverce a další prvky.

Přidání animace čtverce

Abychom dali čtverci animaci v CSS, můžeme použít vlastnost animation . Pomocí animace můžeme nastavit různé efekty pohybu, změny barev nebo velikosti čtverce.

Nejprve vytvoříme čtverec pomocí CSS:

Nyní přidáme animaci pro tento čtverec:

Zde jsme použili animaci s názvem rotate, která trvá 2 sekundy, lineárním přechodem a nekonečným opakováním. Můžete použít jakýkoli název pro vaši animaci a upravit nastavení podle vašich potřeb.

Nyní popíšeme naši animaci v CSS:

Zde jsme k popisu animace použili blok @keyframes. V tomto bloku jsme identifikovali dva klíčové rámečky-from (počáteční rámeček) a to (konečný rámeček). Nastavili jsme rotaci čtverce o 360 stupňů pomocí vlastnosti transformu .

Nyní, při načítání stránky, se čtverec bude otáčet nekonečně kolem svého středu.

Můžete změnit možnosti animace, abyste čtverci dodali další pohybové efekty , nebo použít jiné hodnoty pro vlastnosti transformu ke změně velikosti, otáčení nebo posunu čtverce.

Změna tvaru čtverce na jiný tvar

Ve skutečnosti je změna tvaru čtverce na jiný tvar v CSS poměrně jednoduchá. Existuje několik způsobů, jak toho dosáhnout.

Prvním způsobem je použití vlastnosti border-radius . Tato vlastnost umožňuje zaokrouhlit rohy prvku, včetně čtverce. Chcete-li proměnit čtverec v kruh, stačí nastavit poloměr zaokrouhlení na polovinu šířky nebo výšky čtverce.

.square 

Druhým způsobem je použití vlastnosti transform . Pomocí vlastnosti transform lze aplikovat různé konverze na prvky, včetně jejich tvaru. Pro změnu tvaru čtverce na jiný tvar, jako je trojúhelník, lze použít funkci skew() .

.square

Třetím způsobem je použití vlastnosti clip-path . Pomocí vlastnosti clip-path můžete vytvářet oříznuté tvary. Chcete-li změnit tvar čtverce na jiný tvar, musíte nastavit pravidlo oříznutí pomocí funkce polygon() . Chcete-li například získat trojúhelník, musíte určit souřadnice jeho vrcholů.

.square

Změna tvaru čtverce na jiný tvar v CSS je tedy možná pomocí vlastností border-radius , transform a clip-path . Každá z těchto vlastností nabízí různé způsoby, jak dosáhnout požadovaného výsledku. Zkuste je použít společně nebo samostatně k vytvoření jedinečných a zajímavých tvarů.