css - CSS 背景 - 可以画一些东西吗？

Question

我在可排序的 html 表中有一个标题行。我想在当前排序的列上显示向上箭头/向下箭头。我知道我可以为此使用背景图片，但该网站是第三方托管的，我无法将图片文件上传到它。仅编辑样式表。

无论如何通过CSS“绘制”一个箭头并将其粘贴在背景中？或者也许使用afterandcontent来完成类似的事情？有th类来指示排序与排序。

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>

Answer 1

对于向上箭头：

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

对于向下箭头：

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

这是演示：http: //jsfiddle.net/GLz2b/

Answer 2

您可以使用 :before/:after 伪元素：

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

演示：http: //jsfiddle.net/9KHkp/1/

使用的字符：

• Unicode 字符“黑色上三角” (U+25B2)
• Unicode 字符“黑色向下三角” (U+25BC)

请随意使用url(/path/to/image.png)该content属性。