CSS: Pyramidy

Neberte to moc vážně, jde jen o práci s rámečky. Rozhodně vám nechci vnucovat, že CSS se používá ke kreslení. V žádném případě, ale je to možné.

    Produkty
    O nás
    Aktuální nabídka

Z trojúhelníků jde složit úplně všecho.

3D v CSS

Krychle v třech bodech


 

animace

1. Čtyři rámečky


2. Správně nabarvit


3. Oříznout pomocí CSS vlastnosti clip

<p style="clip: rect(6px 18px 80px 0px); width:30px; height: 10px; position: absolute">
<span id="x" style="width: 2px; height:10px;border-left: 6px solid white;border-right: 6px solid #a7cff8;border-bottom: 6px solid #a7cff8;border-top: 6px solid white"><b></b></span>
<span id="x" style="width: 2px; height:10px;border-left: 6px solid #a7cff8;border-right: 6px solid orange;border-bottom: 6px solid orange;border-top: 6px solid #a7cff8"><b></b></span>
<br>
<span id="x" style="width: 2px; height:10px;border-left: 6px solid #73a2f9;border-right: 6px solid #73a2f9;border-bottom: 6px solid #73a2f9;border-top: 6px solid #73a2f9"><b></b></span>
<span id="x" style="width: 2px; height:10px;border-left: 6px solid orange;border-right: 6px solid white;border-bottom: 6px solid white;border-top: 6px solid orange"><b></b></span>
</p>


 

Další obrazce


 
 



Doporučuji
Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.
Potřebujete poradit?


Vyhledávání


Poradna

Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.

Reklama