CSS background - is it possible to draw something?

Question

I have a header row in a sortable html table. I want to show up arrow / down arrow on the currently sorted column. I know that I can use a background image for this, but the site is third party hosted and I can't upload image files to it. Only edit the stylesheet.

Is there anyway to 'draw' an arrow via CSS and stick it in the background? Or perhaps use after and content to accomplish something similar? The th have classes to indicate sort up vs. sort down.

http://jsfiddle.net/fJ7Gn/

<table>
    <thead>
        <th class="sortup">A</th> <!-- Draw an arrow via CSS? -->
        <th>B</th>
        <th>C</th>
    </thead>
    <tr>
        <td></td>
        <td></td>
        <td></td>        
    </tr>  
</table>

By arrow do you mean a simple triangle? Or a triangle with a trailing block? (`>` or `->`) — George, Feb 26 '13 at 16:35
@F4r-20 - an up vs. down triangle. No trailing block necessary. — mrtsherman, Feb 26 '13 at 16:37
See otinanai's answer - That was going to be mine be he got there first. That's my personal favourite. — George, Feb 26 '13 at 16:37

otinanai · Accepted Answer · 2013-02-26T16:42:51.540

3

For up arrow:

th:after {
    content:"";
    border-style: solid;
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent #007bff transparent;
}

For down arrow:

th:after {
    content:"";
    border-style: solid;
    border-width: 10px 8px 0 8px;
    border-color: #007bff transparent transparent transparent;
}

Here's the demo: http://jsfiddle.net/GLz2b/

edited Feb 26 '13 at 16:42

answered Feb 26 '13 at 16:36

otinanai

3,987
3
25
43

Please have a look at my edit. It seems that I missed the `content` property. Sorry about that. – otinanai Feb 26 '13 at 16:43
Yeah this is a very cool way to do it. Related: [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) Only problem I can imagine is that you have to specify color, whereas using unicode characters will inherit the text color. Or at least I couldn't get it to work, how can this be fixed?: http://jsfiddle.net/GLz2b/2/ Using `inherit` made everything messed up. – Wesley Murch Feb 26 '13 at 16:52
Finished product, incorporating feedback from Wesley also in terms of positioning. http://jsfiddle.net/L5K3k/4/ – mrtsherman Feb 26 '13 at 16:56
This is the demo to avoid setting the `border-color` : http://jsfiddle.net/GLz2b/3/ – otinanai Feb 26 '13 at 16:58

score 1 · Answer 2 · answered Feb 26 '13 at 16:35

1

You can use :before/:after pseudo elements:

.sortup:after {
  content:"\25BC";
  float:right;
}
.sortdown:after {
  content:"\25B2";
  float:right;
}

Demo: http://jsfiddle.net/9KHkp/1/

Characters used:

Feel free to use url(/path/to/image.png) instead for the content property.

answered Feb 26 '13 at 16:35

Wesley Murch

101,186
37
194
228

Very cool. I did not know about using a unicode character for this. Works perfectly in my example. http://jsfiddle.net/fJ7Gn/2/ – mrtsherman Feb 26 '13 at 16:40
1

Ah, might need to swap the arrows but you get the idea. Yeah that looks pretty good. You might want to use absolute positioning so there's no shifting text when you do a sort. – Wesley Murch Feb 26 '13 at 16:40

CSS background - is it possible to draw something?

2 Answers2