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

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

Navigace