How to Make a Down Arrow Using Only CSS

This code works great with text at the default size. If you need to make the text larger, don’t forget to increase the border-width by the same ratio. For example: if your text is 16px (which is what I get in Opera when I don’t set it at all), you might increase it to 32px, but at the same time set border-width to 6px 6px 0;. For an even larger font, you will probably need to adjust other properties as well. And now for the code itself:

.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;
}

Here is also sample code showing everything you need to write in HTML:

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

The result can look like this at the default font size:

Or like this at double the font size (32px):