Jak udělat šipku dolů pouze v CSS

⚠️ Pozor: obrázky z tohoto příspěvku se ztratily při výpadku v roce 2016. Chybějící obrázky nahradí automaticky vtipným placeholderem plugin Broken Image Placeholder.

Tento kód pracuje skvěle u textu ve výchozí velikosti. Pokud potřebujete text zvětšit, nezapomeňte podle ratia zvětšení zvětšit i border-width, příklad: Pokud máte text ve velikosti 16px(takový mám já v Opeře když ho vůbec nijak nenastavuji), tak ho třeba zvyšte na 32px ale zároveň nastavte border-width na 6px 6px 0;. V případě ještě většího písma si asi budete muset upravit i další vlastnosti. A teď už na samotný kód:

CSS
.sipkaDolu {
    border-color: #C0C0C0 transparent transparent;
    border-style: solid dashed dashed;
    border-width: 3px 3px 0;
    display: inline-block;
    left: 4px;
    padding-top: 1px;
    position: relative;
    top: -3px;
}

Ještě ukázkový kód, co všechno musíte napsat v HTML:

C#
<div>
<span>
<span>Dalsi
</span>
<span class="sipkaDolu">
</span>
</div>

A výsledek může být takový při základní velikosti písma:
Dalsi small

Nebo takový při dvojnásobné velikosti písma(32px):
Dalsi bigger

Leave a Reply

Your email address will not be published. Required fields are marked *